小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
ajax 请求本地 .json 文件
在本地建立 .json文件 然后使用 ajax 请求本地文件, 可以达到模拟数据接口的简单需求, 并不是完美的解决方案.
/// 本地的 data/data.json 文件
{
"first": [
{ "name": "张三", "sex": "男" },
{ "name": "李四", "sex": "男" },
{ "name": "王五", "sex": "男" },
{ "name": "小美", "sex": "女" }
]
}
实现代码 一
可以通过$.getJSON来获取本地json文件
/* getJSON*/
$(function(){
$.getJSON("./data/data.json",function(data){
var str="<ul>";
$.each(data.list,function(i,n){
str+="<li>"+n["item"]+"</li>";
})
str+="</ul>";
$("#test").append(str);
});
});
实现代码 二:
每一步代码都给出了相对应的解释说明:
$(document).ready(function () {
$('#btn').click(function () {
$.ajax({
/// 请求的 .json 文件地址链接
url: './data/data.json',
// 请求方式为 get
type: 'GET',
// 返回数据格式为jsonp
dataType: 'jsonp', // 指定服务器返回的数据类型
/// 请求成功完成后要执行的方法函数
success: function (data) {
var result = JSON.stringify(data) // json对象转成字符串
/// 然后将处理的数据插入到节点 text 中
$('#text').val(result)
},
})
})
})
完整的 html 模板及具体逻辑代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>ajax获取本地json数据</title>
</head>
<body>
<div id="btn" style="width: 1000px;height: 500px;background: red;">
<div id="text" style="height: 100px;"></div>
</div>
<script src="https://cdn.bootcdn.com/pkg/jquery.js"></script>
<script>
// $.ajax({
// url: './data/data.json',
// type: 'GET',
// dataType: 'json',
// success: (data)=>{
// $.each(data.first,(i,item)=>{
// var str = `
// <div>姓名: ${item.name} 性别: ${item.sex}</div>
// `
// })
// $("#con-wrap").html(str);
// }
// })
</script>
</body>
</html>
