Ajax使用json前后台交互代码分析
程序员文章站
2022-06-26 11:42:29
前后台分离,虚拟后台传回来的json格式数据文件数据goodslist.json文件如下:
[
{"id":"01",&...
前后台分离,虚拟后台传回来的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"); } });
下一篇: 百行HTML5代码实现四种双人对弈游戏