方法一：通过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;

}

//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，在敲代码中可能会出现跨域问题，小伙伴们在出现这个问题的时候，不要慌张，这个是正常操作。

跨域问题，在控制台会打印如图代码：

作者：歪歪

一名职场老菜鸟，梦想成为一名有头发的编程大牛。