最近在学习vue框架，想使用jquery遍历与v-for遍历来实现表格的显示，这一节写的是jquery遍历
html代码示例如下：
<html><head><meta charset="utf-8"> ???<title></title> ???<style type="text/css"> ???*{ ???????padding: 0; ???????margin: 0; ???} ???????table{ ???????????margin: 100px auto; ???????????border: 1px solid #000; ???????????border-collapse: collapse;/*设置表格的边框是否被合并为一个单一的边框*/ ???????????border-spacing: 0;/*设置相邻单元格的边框间的距离*/ ???????} ???????tr{ ???????????width: 300px; ???????????height: 50px; ???????????line-height: 50px; ???????????border-bottom: 1px solid #000; ???????????background-color: pink; ???????} ???????td,th{ ???????????width: 99px; ???????????height: 50px; ???????????line-height: 50px; ???????????text-align: center; ???????????border-right: 1px solid #000; ???????} ???</style> ???<script type="text/javascript" src="jquery.min.js"></script></head><body></body></html><script type="text/javascript"> ???$.ajax({ ???????url:‘ajaxtable.php‘, ???????type:‘get‘, ???????datatype:‘json‘, ???????success:function(res){ ???????????console.log(res); ???//将数据显示在页面上 ????var str = ""; ????str +="<table><thead><tr><th>姓名</th><th>年龄</th><th>住址</th></tr></thead><tbody>"; ????//遍历数据 ????$.each(res,function(index,element){ ?????str +="<tr><td>"+element[‘name‘]+"</td><td>"+element[‘age‘]+"</td><td>"+element[‘address‘]+"</td></tr>";})//遍历完成之后str +="</tbody></table>";//将表格添加到body中$(‘body‘).append(str);}})</script> ?????php代码示例如下：
<?php ????header(‘content-type:text/html;charset=utf-8‘); ???echo ?file_get_contents(‘ajaxtable.json‘); ?>
json代码示例如下：
[{ ???"name":"baby", ???"age":27, ???"address":"china weifang"},{ ???"name":"黄晓明", ???"age":30, ???"address":"china yantai"},{ ???"name":"鹿晗", ???"age":22, ???"address":"china qingdao"}]jquery之从ajax获取json数据以表格的形式显示在页面上
原文地址：https://www.cnblogs.com/creazybeauty/p/8568177.html