ajax和json简单实例
知道小谷的都知道，我是一个不喜欢复习的人，然后上课讲的ajax至今都回避，今天终于还是被迫学习了。
活不多说，我们直接上代码，希望对和我一样的小菜鸟能有帮助（大佬请护眼！嘿嘿）。
实例：html，js
用到两个文件：
实现图：
ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container {
width: 800px;
margin: 0 auto;
margin-top: 100px;
padding: 30px 0;
border: 1px dashed #272627;
}
.test {
width: 100%;
padding: 10px 0;
margin: 20px 0;
color: #4bade8;
font-size: 18px;
text-align: center;
}
#jsonTable {
width: 500px;
margin: 0 auto;
}
#jsonTable th,
td {
padding: 6px 0;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="test">获取模拟json数据</div>
<table border="1" cellspacing="0" bordercolor="#4bade8" cellpadding="0" id="jsonTable">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
<div id="gym"></div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
getDate();
function getDate() {
var temp = '';
$.ajax({
type: "get",//请求方式
url: "queryList.json",//请求的url
dataType: "json",//后台数据返回类
success: function(res) {//响应成功执行的
var list = res.animals
alert(res.animals[0].name);//开始的时候我想试试能出来吗？如果出的来，我就试试之前js的一些绑定id修改界面的
var gym=document.getElementById("gym");
gym.innerHTML="<h2>"+res.animals[0].name+"</h2>";
console.log(list)
for(var i = 0; i < list.length; i++) {
temp +=
'<tr>' +
'<td>' + list[i].id + '</td>' +
'<td>' + list[i].name + '</td>' +
'<td>' + list[i].age + '</td>' +
'</tr>';
}
$("#jsonTable tr:not(:first)").html(""); /* 除了第一行tr的内容，其余内容清空，防止获取重复的数据 */
$("#jsonTable").append(temp);
}
});
}
});
</script>
</body>
</html>
queryList.json(大家可以先用txt文本写入，然后修改后缀)
{
"animals":[
{
"id":1,
"name":"dog",
"age":3
},
{
"id":2,
"name":"kitty",
"age":2
},
{
"id":3,
"name":"cat",
"age":4
}
]
}
小谷的尽量减少学习者的负担，直接复制进自己的软软件就能跑出来，ajax.html页面中的js代码学习的同学可以看，也有一点注释。
如果有帮助，希望大家多给小谷评论，关注。嘿嘿！
