<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$.ajax({
url: "test.json", //json文件位置
type: "GET", //请求方式为get
dataType: "json", //返回数据格式为json
success: function(data) { //请求成功完成后要执行的方法
//each循环 使用$.each方法遍历返回的数据date
$.each(data.first, function(i, item) {
var str = '<div>姓名:' + item.name + '昵称：' + item.nick + '</div>';
document.write(str);
})
}
})
</script>
</html>
test.json
{
"first": [
{
"name": "王小婷",
"nick": "祈澈菇凉"
}, {
"name": "安安",
"nick": "坏兔子"
}, {
"name": "编程微刊",
"nick": "简书"
}
]
}
参考：ajax和axios请求本地json数据对比
https://www.jianshu.com/p/4b9cb79fedd5
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，欢迎加入首页编程微刊qq群。
