您的位置:首页 > Web前端 > JavaScript

Ajax使用json前后台交互

2018-04-02 19:37 309 查看
前后台分离,虚拟后台传回来的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");
             }
    });
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: