1. 程式人生 > >JS中將ajax請求返回json數據動態生成表格顯示在div中

JS中將ajax請求返回json數據動態生成表格顯示在div中

等待 query 客戶端 versions 包含 index 方法 func 數據

1、頁面內容

<div style="width:900px;height:400px;" id="tableInfo"></div>

2、js內容

$.ajax({ //使用JQuery內置的Ajax方法
type : "post", //post請求方式
async : true, //異步請求(同步請求將會鎖住瀏覽器,用戶其他操作必須等待請求完成才可以執行)
url : "countVersion.action", //請求發送到ShowInfoIndexServlet處
data : productversions, //請求內包含一個key為name,value為損壞數的參數;服務器接收到客戶端請求時通過request.getParameter方法獲取該參數值
dataType : "json", //返回數據形式為json
success : function(result) {
//請求成功時執行該函數內容,result即為服務器返回的json對象
if (result != null && result.length > 0) {

    //動態生成表格
var tableInfos = document.getElementById(‘tableInfo‘);
var code = ‘<TABLE style="width:900px;height:350px;" border="1">‘;
code += ‘<TR><TH>產品</TH><TH>數量</TH></TR>‘;
for(var i=0;i<result.length;i++){

code += ‘<TR><TD>‘+result[i].version+‘</TD><TD>‘+result[i].count+‘</TD></TR>‘;
}
tableInfos.innerHTML = code + ‘</TABLE>‘;
}else {

alert("無數據!");

}

JS中將ajax請求返回json數據動態生成表格顯示在div中