Ajax使用json前后台交互

前后台分离,虚拟后台传回来的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");
                        }
		    });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值