Jscript 访问 Json文件

通过 XMLHttpRequest 访问 Json 文件

我们存在文件结构

我想通过Js来访问Test.json的文本，Json文本为：

我们需要：

// 1.创建一个 XMLHttpRequest 对象
 var request = new XMLHttpRequest()
 // 2.使用open()方法指定请求方法 (Get / Post) 和是否异步操作
 request.open("Get","Test.json",true)
 // 3.设置onreadystatechange 事件处理程序来监听是否加载完成
 request.onreadystatechange = function(){
     // 3.1当request.readyState === 4 或者 request.status === 200 时可以将responseText解析为Json对象
     if(request.readyState === 4 && request.status === 200){
         var jsonData = JSON.parse(request.responseText)
         console.log(jsonData)
     }
 }
 request.send()

得到浏览器打印结果：

获取Json文件成功

---

通过 fetch(xx.json) 来访问Json文件

我们存在文件结构

我想通过Js来访问Test.json的文本，Json文本为：

我们需要:

// 使用fetch 访问 Json 文件
 // 使用fetch("xx.json")发送GET请求到指定URL
 fetch("Test.json")
     .then(function(respone){
         // 如果响应成功,可以使用json()方法将响应解析为JSON文件对象
         if(respone.ok){
             return respone.json()
         }
         throw new Error("Network respone was not ok.")
     })
     .then(function(jsonData){
         console.log(jsonData)
     })
     .catch(function(error){
         console.log("Error:",error.message)
     })

得到浏览器打印结果：

获取Json文件成功

注意：

URL是相对于当前脚本的文件路径

如果使用浏览器环境之外的环境（如Node.js），可能需要使用适当的模块或库来读取文件内容