《前端》ajax--後臺返回的json數據傳到前端頁面並在頁面的表格中填充

 https://www.cnblogs.com/zhangshitong/p/5590885.html

web前端頁面：

<table id="myTable" cellpadding="1" cellspacing="0" border="1">
    <caption align="top">流程管理</caption>
    <thead>
        <tr>
            <th>流程ID</th>
            <th>流程名稱</th>
            <th>流程版本</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

從後臺返回的json數據：

[{"deploymentId":"80001","id":"leave-16","name":"leave","version":16},{"deploymentId":"80015","id":"leave-17","name":"leave","version":17},{"deploymentId":"80022","id":"leave-18","name":"leave","version":18},{"deploymentId":"90001","id":"leave-19","name":"leave","version":19},{"deploymentId":"90012","id":"leave-20","name":"leave","version":20},{"deploymentId":"100001","id":"leave-21","name":"leave","version":21}]

前端的js代碼：（這裏用的ajax返回給前臺的json並做處理）

$(function () {
	$.ajax({
		url: "/jbpm2web/jbpm/show?username=<%=session.getAttribute("username") %>",
		type: "get",
		success: function (data) {
                        //eval的作用：由JSON字符串轉換爲JSON對象
			var obj = eval(data);
			var tbody = $('<tbody></tbody>');
			$(obj).each(function (index) {
				var val = obj[index];
				var tr = $('<tr></tr>');
                        //在tr後面加內容
				tr.append('<td>' + val.id + '</td>' + '<td>' + val.name + '</td>' + '<td>' + val.version + '</td>' + '<td><a href="/jbpm2web/jbpm/delete?id=' + val.deploymentId + '" >刪除流程</a>|<a href="/jbpm2web/jbpm/start?id=' + val.id + '&username=<%=session.getAttribute("username") %>">發起流程</a></td>');
                        //在tbody後面加內容
				tbody.append(tr);
			});
			$('#myTable tbody').replaceWith(tbody);//替換
		}
	});
});

補充小知識點： var obj = eval(data);這條語句爲什麼要eval（）？

--在數據傳輸過程中，json是以文本，即字符串的形式傳遞的，而JS操作的是JSON對象，所以，JSON對象和JSON字符串之間的相互轉換是關鍵。例如： JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }'; JSON對象: var str2 = { "name": "cxh", "sex": "man" };
eval可以在javascript中將json文本轉成javascript對象。也有博主說要多加一個圓括號，如下：

var dataObj=eval("("+data+")");(eval會帶來很多問題，不建議使用，如果想實現轉化用JSON.parse更好)

爲什麼eval要添加括號呢？ 原因：eval本身的問題。由於json是以{}的方式來開始以及結束的， 在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉換成一種表達式。 加上圓括號的目的是迫使eval函數在處理JavaScript代碼的時候強制將括號內的表達式(expression)轉化爲對象， 而不是作爲語句(statement)來執行。 舉一個例子，例如對象字面量{}，如若不加外層的括號， 那麼eval會將大括號識別爲JavaScript代碼塊的開始和結束標記， 那麼{}將會被認爲是執行了一句空語句。 console.log(eval("{}"); // undefined console.log(eval("({})");// object[Object]

當然：如果後臺返回的是json對象，什麼操作都不需要，直接使用 data 即可。如果你是用的 jquery，將type（一般爲這個配置屬性）設爲json， 或者利用$.getJSON()方法獲得服務器返回，那麼就不需要eval()方法了，因爲這時候得到的結果已經是json對象了，只需直接調用該對象即可

跨域請求問題

我將代碼貼上之後，報錯：

jquery.js:8623 Failed to load file:///C:/Users/IT/Desktop/jsonDate.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

看報錯可知：跨源請求僅支持以下協議方案：http，數據，chrome，chrome擴展名，https，發現了沒？沒有file協議！

在Chrome瀏覽器裏，ajax方法用jsonp直接跨域訪問本地的js文件。

報錯分析：

1.判斷爲ajax的跨域訪問問題

2.本地沒有通過服務器，直接ajax用jsonp訪問本地js，使用file協議！

3.上面的報錯信息就已經說明了，ajax跨域只支持這些協議框架：http,https,data,chrome（Chrome瀏覽器）,chrome-extension（Chrome擴展插件），chrome-extension-resource（Chrome擴展資源），就是沒有file協議!用了jsonp這種跨域json數據交互協議也沒有，人家ajax就只支持那幾個協議，並且jsonp交互協議也非官方正式的。

解決過程：

方法一：在google瀏覽器的安裝路徑後面添加" --allow-file-access-from-files",(注意前面有空格)

方法二：找到谷歌瀏覽器chrome.exe安裝路徑複製下來，我的是E:\Google\Application\chrome.exe，再打開cmd，直接輸入命令

方法三：

1.爲避免跨域問題要在服務器環境裏運行含有ajax方法的頁面，而不是本地頁面直接訪問本地文件的方式，這樣保證了在用post或者get這類http請求，才能避免ajax跨域問題。

2.本地頁面ajax()請求本地頁面，須通過服務器環境運行，類似這樣：
http://127.0.0.1:8888/websrc/html_ajax/testjsonp.jsp

3.如果是在遠程服務器裏ajax()請求外域服務器裏的頁面，即使通過服務器環境運行也會報跨域的錯誤，此時需要通過JSONP的形式！所以，還是把本地jsp放入tomcat中運行再訪問本地文件吧！

那問題來了，怎麼把文件放到tomcat上跑起來？

• 找到tomcat安裝路徑

• 將本地文件複製到tomcat webapps目錄下：

回到bin目錄，點擊startup.bat文件運行

瀏覽器手動輸入localhost: 8080/文件工程名/頁面名.html

我安裝步驟做了，打不開網頁，報錯爲：

這樣在本地模擬，不會產生跨域。

放 ie8，會報錯

• 原因是jq3.0版本，不支持ie8.
  解決方案：要麼替換低版本的jq，2.0以下的都可以。

要麼兼容寫法：修改高版本中的一些方法，添加if else判斷即可。

• ie8報錯isArray

//  isArray: Array.isArray, // 高版本
    isArray: Array.isArray || function( obj ) {
        return jQuery.type(obj) === "array";
    },//兼容低版本

• ie8報錯addEventListner

//          ie8不支持addEventListener zz
            if (window.attachEvent) {    
                window.attachEvent("onload", completed);    
            } else if (window.addEventListener) {    
                // Use the handy event callback
                document.addEventListener( "DOMContentLoaded", completed );
                // A fallback to window.onload, that will always work
                window.addEventListener( "load", completed );
            } 

• 引入低版本的ie8顯示正常：

提供一個靜態文件HTTP服務器 Sublime Server

長久來看，肯定是需要通過HTTP的方式訪問你的應用，那就需要配置HTTP服務器軟件。但是對於一些剛入門的人，配一個HTTP服務器（比如Apache、IIS等）比較繁瑣，望而卻步。

• 對於使用IDE的同學沒什麼好說的，每個用於Web開發的IDE都內置http服務器，不用單獨配置。
• 對於喜歡輕量級編輯器的同學，比如Sublime Text，它默認是沒有內置HTTP服務器的

接下來推薦一款Sublime的插件Sublime Server，這個插件可以提供一個靜態文件HTTP服務器，具體使用方式如下：

• 安裝Package Control（Sublime的插件管理工具），不會安裝自行Google

• Command+Shift+P或Ctrl+Shift+P打開命令面板，輸入Package Control: Install Package

• 稍等片刻（此時會連接到插件提供商的服務器，比較慢，有可能背牆），搜索SublimeServer

• 安裝完成過後通過Tool → SublimeServer → Start SublimeServer

• 一定要用打開文件夾的方式使用Sublime，否則沒有辦法正常使用SublimeServer。

• 打開HTML文件，在右鍵菜單中選擇View in SublimeServer，此時就可以以HTTP方式在瀏覽器中訪問該文件了，

• 如果該選項是灰色的，那就說明沒有啓動SublimeServer，Tool → SublimeServer → Start SublimeServer

到此爲止，你已經可以在Sublime中使用HTTP服務器了。

可能遇到的問題

如果Start SublimeServer不能點，可能是當前8080端口被佔用了（SublimeServer默認使用8080端口）

解決方法就是打開配置文件將端口修改爲其他端口：

以下是我的配置：

{
	"attempts": 5,
	"autorun": false, // 是否在啓動Sublime時自動啓動SublimeServer
	"defaultExtension": ".html",
	"interval": 500,
	"mimetypes":
	{
		"": "application/octet-stream",
		".c": "text/plain",
		".h": "text/plain",
		".py": "text/plain"
	},
	"port": 2016 // 端口號
}

當然其他編輯器也有類似的插件。