js读取本地json格式文件数据的几种实现方法，内有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>{{row.id}}</td> <td>{{row.name}}</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(row.Id)">删除</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="rowtemplate.name" /></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://cdn.jsdelivr.net/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 (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; } } }); </script> </body> </html>
可能出现的问题
上述提供了三种方式来读取本地的json格式数据，还通过了vue的代码案例来试验了getJSON，在敲代码中可能会出现跨域问题，小伙伴们在出现这个问题的时候，不要慌张，这个是正常操作。
跨域问题，在控制台会打印如图代码：
浏览器跨域问题我写了一篇文章来设置解决跨域问题：windows下解决前端开发过程中浏览器跨域问题（操作案例为谷歌）
作者：歪歪
一名职场老菜鸟，梦想成为一名有头发的编程大牛。
