文章目录
- 方法一：通过getJSON实现
- 方法二：使用原生js实现
- 方法三：使用AJAX实现
- 在vue中实现获取json格式文件并编辑
- 可能出现的问题
方法一：通过getJSON实现
getJSON是jquery提供的读取json格式文件的方法
首先我们将html中引入jquery,可以通过百度CDN引入，代码如下：
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>然后就可以在script中使用getJSON，getJSON代码格式如下：
$.getJSON("userinfo.json", function(data) {
//data 代表读取到的json中的数据
});参考示例：
- 第一步：创建一个json格式文件，取名为userinfo.json
[
{
"name": "张三",
"sex": "男"
},
{
"name": "李四",
"sex": "男"
},
{
"name": "王五",
"sex": "女"
}
]- 第二步创建一个html文件（同json路径下），取名为index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用jquery读取json格式文件</title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<div id="divframe">
<div class="loadTitle">
<input type="button" value="获取数据" id="btn" />
</div>
<div id="jsonTip"></div>
</div>
</body>
<script type="application/javascript">
//监听按钮点击事件
$("#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"] + "<br>";
strHtml += "性别：" + info["sex"] + "<br>";
strHtml += "<hr>"
})
//显示处理后的数据
$jsontip.html(strHtml);
})
})
</script>
</html>方法二：使用原生js实现
参考示例代码：
- 使用上面已经创建的json文件
- 将html文件修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用jquery读取json格式文件</title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<div id="divframe">
<div class="loadTitle">
<input type="button" value="获取数据" id="btn" />
</div>
<div id="jsonTip"></div>
</div>
</body>
<script type="application/javascript">
//监听按钮点击事件
$("#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"] + "<br>";
strHtml += "性别：" + info["sex"] + "<br>";
strHtml += "<hr>"
})
//显示处理后的数据
$jsontip.html(strHtml);
}
}
})
</script>
</html>方法三：使用AJAX实现
参考示例代码：
- 使用上面已经创建的json文件
- 将html文件修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用jquery读取json格式文件</title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<div id="divframe">
<div class="loadTitle">
<input type="button" value="获取数据" id="btn" />
</div>
<div id="jsonTip"></div>
</div>
</body>
<script type="application/javascript">
//监听按钮点击事件
$("#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"] + "<br>";
strHtml += "性别：" + info["sex"] + "<br>";
strHtml += "<hr>"
})
//显示处理后的数据
$jsontip.html(strHtml);
}
})
})
</script>
</html>在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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学生信息管理</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
table thead tr th {
text-align: center;
}
</style>
</head>
<body>
<div style="padding:20px;" id="app">
<div class="panel panel-primary">
<div class="panel-heading">学生信息管理</div>
<table class="table table-bordered table-striped text-center">
<thead>
<tr style="text-align:left;">
<template v-for="headitem in head">
<th>{{headitem}}</th>
</template>
</tr>
</thead>
<tbody>
<template v-for="row in rows ">
<tr>
<td>{{}}</td>
<td>{{}}</td>
<td>{{row.stuNo}}</td>
<td>{{row.sex}}</td>
<td>{{row.majorName}}</td>
<td>{{row.age}}</td>
<td>{{row.operDate}}</td>
<td><a href="#" v-on:click="Edit(row)">编辑</a> <a href="#" v-on:click="Delete()">删除</a>
</td>
</tr>
</template>
<tr>
<td><input type="text" class="form-control" v-model="rowtemplate.id" /></td>
<td><input type="text" class="form-control" v-model="" /></td>
<td><input type="text" class="form-control" v-model="rowtemplate.stuNo" /></td>
<td><input type="text" class="form-control" v-model="rowtemplate.sex" /></td>
<td><input type="text" class="form-control" v-model="rowtemplate.majorName" /></td>
<td><input type="text" class="form-control" v-model="rowtemplate.age" /></td>
<td><input type="text" class="form-control" v-model="rowtemplate.operDate" /></td>
<td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https:///npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
//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 ( == 0) {
= this.rows.length + 1;
if (this. === '') {
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;
}
}
});
</script>
</body>
</html>可能出现的问题
上述提供了三种方式来读取本地的json格式数据，还通过了vue的代码案例来试验了getJSON，在敲代码中可能会出现跨域问题，小伙伴们在出现这个问题的时候，不要慌张，这个是正常操作。
跨域问题，在控制台会打印如图代码：
浏览器跨域问题我写了一篇文章来设置解决跨域问题：windows下解决前端开发过程中浏览器跨域问题（操作案例为谷歌）
作者：歪歪
一名职场老菜鸟，梦想成为一名有头发的编程大牛。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
