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");
                        }
		    });

猜你喜欢

转载自blog.csdn.net/qq_38151401/article/details/79793803