js讀取本地json格式檔案資料的幾種實現方法，內有vue讀取json示例程式碼。
阿新 • • 發佈：2020-12-23
目錄
方法一：通過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/[email protected]/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下解決前端開發過程中瀏覽器跨域問題（操作案例為谷歌）
作者：歪歪
一名職場老菜鳥，夢想成為一名有頭髮的程式設計大牛。