js如何获取json文件-js教程-PHP中文网

js如何获取json文件

下次还敢

发布： 2024-05-23 03:54:18

原创

1465人浏览过

可以使用两种方法获取 JSON 文件：使用 fetch() 方法：发送请求，解析响应为 JSON 对象。使用 XMLHttpRequest 对象：创建请求、配置参数、处理请求完成事件并解析响应为 JSON 对象。

js如何获取json文件

如何使用 JavaScript 获取 JSON 文件

获取 JSON（JavaScript Object Notation）文件是 JavaScript 中常见的一个任务。有多种方法可以实现，本文将详细介绍两种最常用的方法：

使用 fetch() 方法

fetch() 方法是一种内置的 JavaScript API，用于从服务器请求数据：

<code class="javascript">fetch('path/to/file.json').then(response => {
  if (response.ok) {
    return response.json();
  } else {
    throw new Error(`Error ${response.status}`);
  }
}).then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});</code>

登录后复制

在上述代码中：

移动端无限滚动加载瀑布流

里面有2个文件夹。其中这个文件名是:finishing，是我项目还没有请求后台的数据的模拟写法。请求后台数据之后，瀑布流的js有一点点变化，放在文件名是：finished。变化在于需要穿参数到后台，和填充的内容都用后台的数据填充。看自己项目需求来。由于chrome模拟器是不允许读取本地文件json的，所以如果你要进行测试，在hbuilder打开项目就可以看到效果啦，或者是火狐浏览器。

查看详情

fetch() 方法向服务器发出请求，返回一个 Promise。
response.ok 检查响应状态码，以确保请求成功。
response.json() 将响应数据解析为 JSON 对象。
then() 处理解析后的 JSON 数据。
catch() 处理任何错误。

使用 XMLHttpRequest 对象

XMLHttpRequest (XHR) 是一个旧的 API，但仍然可以用于获取 JSON 文件：

<code class="javascript">const xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/file.json', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    let data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error(`Error ${xhr.status}`);
  }
};
xhr.send();</code>

登录后复制

在上述代码中：

XMLHttpRequest 对象用于创建请求。
open() 方法配置请求参数。
onload 事件处理程序在请求完成后执行。
xhr.responseText 获取响应数据，然后通过 JSON.parse() 解析为 JSON 对象。

以上就是js如何获取json文件的详细内容，更多请关注php中文网其它相关文章！