1.首先編寫(xiě)一個(gè)json文件：demo.json

[ { "name":"張三", "sex":"男", "email":"zhangsan@123.com" }, { "name":"李四", "sex":"男", "email":"lisi@123.com" }, { "name":"王五", "sex":"女", "email":"wangwu@123.com" } ]

讀取

原生js讀取json文件

<script>window.onload = function () {var url = "demo.json"/*json文件url，本地的就寫(xiě)本地的位置，如果是服務(wù)器的就寫(xiě)服務(wù)器的路徑*/var request = new XMLHttpRequest();request.open("get", url);/*設(shè)置請(qǐng)求方法與路徑*/request.send(null);/*不發(fā)送數(shù)據(jù)到服務(wù)器*/request.onload = function () {/*XHR對(duì)象獲取到返回信息后執(zhí)行*/if (request.status == 200) {/*返回狀態(tài)為200，即為數(shù)據(jù)獲取成功*/var json = JSON.parse(request.responseText);for(var i=0;i<json.length;i++){console.log(json[i].name);}console.log(json);}}}</script>

$.getJSON

<script type="text/javascript">var Ajax = function (){$.getJSON ("demo.json", function (data){$.each (data, function (i, item){console.log(item.name);});});}(); </script>

$.ajax

$.ajax({url: "demo.json",//json文件位置，文件名type: "GET",//請(qǐng)求方式為getdataType: "json", //返回?cái)?shù)據(jù)格式為jsonsuccess: function(data) {//請(qǐng)求成功完成后要執(zhí)行的方法 //給info賦值給定義好的變量var pageData=data;for(var i=0;i<data.length;i++){console.log(pageData[i].name);}}})

總結(jié)

以上是生活随笔為你收集整理的js读取json文件（原生和jQuery）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。