方法一:通过getJSON实现
getJSON是jquery提供的读取json格式文件的方法
首先我们将html中引入jquery,可以通过百度CDN引入,代码如下:
然后就可以在script中使用getJSON,getJSON代码格式如下:
$.getJSON("userinfo.json", function(data) {
//data 代表读取到的json中的数据
});
参考示例:
第一步:创建一个json格式文件,取名为userinfo.json
[
{
"name": "张三",
"sex": "男"
},
{
"name": "李四",
"sex": "男"
},
{
"name": "王五",
"sex": "女"
}
]
第二步创建一个html文件(同json路径下),取名为index.html
使用jquery读取json格式文件
//监听按钮点击事件
$("#btn").click(function() {
//使用getJSON读取userinfo.json文件中的数据
$.getJSON("userinfo.json", function(data) {
console.log(data);
//获取jsonTip的div
var $jsontip = $("#jsonTip");
//存储数据的变量
var strHtml = "123";
//清空内容
$jsontip.empty();
//将获取到的json格式数据遍历到div中
$.each(data, function(infoIndex, info) {
strHtml += "姓名:" + info["name"] + "
";
strHtml += "性别:" + info["sex"] + "
";
strHtml += "
"
})
//显示处理后的数据
$jsontip.html(strHtml);
})
})
方法二:使用原生js实现
参考示例代码:
使用上面已经创建的json文件
将html文件修改
使用jquery读取json格式文件
//监听按钮点击事件
$("#btn").click(function() {
// 同文件夹下的json文件路径
var url = "userinfo.json"
// 申明一个XMLHttpRequest
var request = new XMLHttpRequest();
// 设置请求方法与路径
request.open("get", url);
// 不发送数据到服务器
request.send(null);
//XHR对象获取到返回信息后执行
request.onload = function () {
// 返回状态为200,即为数据获取成功
if (request.status == 200) {
var data = JSON.parse(request.responseText);
console.log(data);
//获取jsonTip的div
var $jsontip = $("#jsonTip");
//存储数据的变量
var strHtml = "123";
//清空内容
$jsontip.empty();
//将获取到的json格式数据遍历到div中
$.each(data, function(infoIndex, info) {
strHtml += "姓名:" + info["name"] + "
";
strHtml += "性别:" + info["sex"] + "
";
strHtml += "
"
})
//显示处理后的数据
$jsontip.html(strHtml);
}
}
})
方法三:使用AJAX实现
参考示例代码:
使用上面已经创建的json文件
将html文件修改
使用jquery读取json格式文件
//监听按钮点击事件
$("#btn").click(function() {
$.ajax({
url: "userinfo.json",//同文件夹下的json文件路径
type: "GET",//请求方式为get
dataType: "json", //返回数据格式为json
success: function(data) {//请求成功完成后要执行的方法
console.log(data);
//获取jsonTip的div
var $jsontip = $("#jsonTip");
//存储数据的变量
var strHtml = "123";
//清空内容
$jsontip.empty();
//将获取到的json格式数据遍历到div中
$.each(data, function(infoIndex, info) {
strHtml += "姓名:" + info["name"] + "
";
strHtml += "性别:" + info["sex"] + "
";
strHtml += "
"
})
//显示处理后的数据
$jsontip.html(strHtml);
}
})
})
在vue中实现获取json格式文件并编辑
示例代码:
创建json格式文件,取名为data
[{
"id": 10,
"name": "张三",
"stuNo": "A001",
"sex": "男",
"majorName": "计算机科学与技术",
"age": 18,
"operDate": "2020-10-27"
}, {
"id": 11,
"name": "李四",
"stuNo": "A002",
"sex": "女",
"majorName": "计算机科学与技术",
"age": 19,
"operDate": "2020-10-27"
}, {
"id": 12,
"name": "王五",
"stuNo": "A003",
"sex": "男",
"majorName": "计算机科学与技术",
"age": 19,
"operDate": "2020-10-27"
}]
创建一个html文件,引入jquery.js和vue.js
学生信息管理
table thead tr th {
text-align: center;
}
学生信息管理
{{headitem}}
{{row.id}}{{row.name}}{{row.stuNo}}{{row.sex}}{{row.majorName}}{{row.age}}{{row.operDate}}
编辑
删除保存
//Model
var data = {
head: ["id", "姓名", "学号", "性别", "学科", "年龄", "操作时间", ],
rows: [],
rowtemplate: {
id: '',
name: '',
stuNo: '',
sex: '',
majorName: '',
age: '',
operDate: ''
}
};
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
mounted() {
// 这里一定要使用常量 const来引用this,不然可能会出现this指向问题
const that = this
// 使用getjson读取数据
$.getJSON("data.json", function(data) {
// 将读取到的json数据赋值给rows
that.rows = data;
});
},
methods: {
Save: function(event) {
if (this.rowtemplate.Id == 0) {
this.rowtemplate.Id = this.rows.length + 1;
if (this.rowtemplate.name === '') {
alert("Name can not empty!");
} else {
this.rows.push(this.rowtemplate);
}
}
//还原模板
this.rowtemplate = {
id: 0,
name: '',
stuNo: '',
sex: '',
majorName: '',
age: '',
operDate: ''
}
},
Delete: function(id) {
for (var i = 0; i < this.rows.length; i++) {
if (this.rows[i].Id == id) {
this.rows.splice(i, 1);
break;
}
}
},
Edit: function(row) {
this.rowtemplate = row;
}
}
});
可能出现的问题
上述提供了三种方式来读取本地的json格式数据,还通过了vue的代码案例来试验了getJSON,在敲代码中可能会出现跨域问题,小伙伴们在出现这个问题的时候,不要慌张,这个是正常操作。
跨域问题,在控制台会打印如图代码:
作者:歪歪