前后台分离,虚拟后台传回来的json格式数据文件数据goodslist.json文件如下:
[
{"id":"01","exhibitorId":"0001","creatTime":"2017-10-2","exhibitsName":"张三","intro":"简介"},
{"id":"02","exhibitorId":"0001","creatTime":"2017-10-2","exhibitsName":"张三","intro":"简介"},
{"id":"03","exhibitorId":"0001","creatTime":"2017-10-2","exhibitsName":"张三","intro":"简介"},
{"id":"04","exhibitorId":"0001","creatTime":"2017-10-2","exhibitsName":"张三","intro":"简介"}
]
要将上述json数据通过ajax获取渲染到页面表格中:
<table border="1">
<thead>
<tr>
<th>id</th>
<th>展品id</th>
<th>时间</th>
<th>展商姓名</th>
<th>详情</th>
</tr>
</thead>
<tbody id="goods"></tbody>
</table>
注意一定要进入jQuery头文件:
<script type="text/javascript" src="jquery.min.js"></script>
ajax请求具体如下:
$.ajax({
type:"GET",
url:"goodslist.json",
dataType:"json",
success:function(data){
list="";
//i表示在data中的索引位置,n表示包含的信息的对象
$.each(data,function(i,result){
//获取对象中属性
list+="<tr>"
list+="<td>"+result["id"]+"</td>";
list+="<td>"+result["exhibitorId"]+"</td>";
list+="<td>"+result["creatTime"]+"</td>";
list+="<td>"+result["exhibitsName"]+"</td>";
list+="<td>"+result["intro"]+"</td>";
list+="</tr>";
});
$('#goods').html(list);
},
error : function(error) {
alert("error");
}
});