方法一

1.首先編寫一個json文件：demo.json

[

{

"name":"張三",

"sex":"男",

"email":"zhangsan@123.com"

},

{

"name":"李四",

"sex":"男",

"email":"lisi@123.com"

},

{

"name":"王五",

"sex":"女",

"email":"wangwu@123.com"

}

]

2.js讀取json文件

window.onload = function () {

var url = "demo.json"/*json文件url，本地的就寫本地的位置，如果是服務器的就寫服務器的路徑*/

var request = new XMLHttpRequest();

request.open("get", url);/*設置請求方法與路徑*/

request.send(null);/*不發送數據到服務器*/

request.onload = function () {/*XHR對象獲取到返回信息后執行*/

if (request.status == 200) {/*返回狀態為200，即為數據獲取成功*/

var json = JSON.parse(request.responseText);

for(var i=0;i

console.log(json[i].name);

}

console.log(json);

}

}

}

方法二

通過ajax獲取json

var Ajax = function ()

{

$.getJSON ("demo.json", function (data)

{

$.each (data, function (i, item)

{

console.log(item.name);

});

});

}();

$.ajax({

url: "demo.json",//json文件位置，文件名

type: "GET",//請求方式為get

dataType: "json", //返回數據格式為json

success: function(data) {//請求成功完成后要執行的方法

//給info賦值給定義好的變量

var pageData=data;

for(var i=0;i

console.log(pageData[i].name);

}

}

})

方法三

工程化開發時(webpack/parcel)等，可以用import導入

import xx from 'xxx.json'

//文件后綴可省略，如

import xx from 'xxx'

————————————————

版權聲明：本文為CSDN博主「ClearLoveQ」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/ClearLoveQ/article/details/90480207

總結

以上是生活随笔為你收集整理的js读取服务器json文件,原生js读取json文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。