js读取本地json格式文件数据的几种实现方法，内有vue读取json示例代码。 |
您所在的位置：网站首页 › 特别简单的家常菜 › js读取本地json格式文件数据的几种实现方法，内有vue读取json示例代码。 |
js读取本地json格式文件数据的几种实现方法，内有vue读取json示例代码。
|
目录方法一：通过getJSON实现方法二：使用原生js实现方法三：使用AJAX实现在vue中实现获取json格式文件并编辑可能出现的问题
方法一：通过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，在敲代码中可能会出现跨域问题，小伙伴们在出现这个问题的时候，不要慌张，这个是正常操作。 跨域问题，在控制台会打印如图代码：
浏览器跨域问题我写了一篇文章来设置解决跨域问题：windows下解决前端开发过程中浏览器跨域问题（操作案例为谷歌） 作者：歪歪 一名职场老菜鸟，梦想成为一名有头发的编程大牛。 |
【本文地址】
今日新闻 |
推荐新闻 |