在本文中，我们将研究 JSON 的重要性以及为什么我们应该在我们的应用程序中使用它。我们将看到 jQuery 为我们提供了一个非常方便的函数。

什么是 JSON？

JSON代表Ĵ AVA小号CRIPT ö bject Ñ浮选。它是一种独立于语言、基于文本的格式，通常用于在 Web 应用程序中传输数据。在本文中，我们将了解如何使用 HTTP GET 请求加载 JSON 数据（我们也可以使用其他动词，例如 POST）。

为什么我们会选择 JSON 而不是 XML？使用 JSON 的主要优势是效率。JSON 不那么冗长和混乱，因此字节更少，解析过程更快。这使我们可以处理以 JSON 而非 XML 形式发送的更多消息。此外，JSON 具有非常高效和自然的对象表示，导致了BSON等格式，其中类似 JSON 的对象以二进制格式存储。

现在，让我们看看 jQuery 如何帮助我们从远程源加载 JSON 编码的数据。对于那些不耐烦的人，文章末尾有一个演示。

JSON jQuery 语法

$.getJSON()如果您不需要太多额外配置，该方法是直接使用 JSON 的方便助手。本质上，它归结为更通用的$.ajax()助手，隐式使用正确的选项。方法签名是：

$.getJSON(url, data, success);

除了必需的 URL 参数，我们还可以传入两个可选参数。一个代表要发送到服务器的数据；另一个代表在成功响应的情况下触发的回调。

所以三个参数对应：

的url参数，其是包含于所述发送请求的URL的字符串
可选data参数，它是一个对象或一个字符串，随请求发送到服务器
可选success(data, textStatus, jqXHR)参数，这是一个回调函数，只有在请求成功时才执行

在最简单的场景中，我们只关心返回的对象。在这种情况下，潜在的success回调将如下所示：

function success(data) {
  // do something with data, which is an object
}

如前所述，可以使用更详细的$.ajax()调用触发相同的请求。在这里我们将使用：

$.ajax({
  dataType: 'json',
  url: url,
  data: data,
  success: success
});

让我们使用一个小演示在实践中看到这一点。

示例应用程序

我们将启动一个提供静态 JSON 文件的本地服务器。这个文件所代表的对象将由我们的 JavaScript 代码获取和处理。出于演示的目的，我们将使用 Node.js 来提供服务器（尽管任何服务器都可以）。这意味着我们需要以下三样东西：

Node.js 的工作安装
节点包管理器 (npm)
live-server 包的全局安装

前两点是平台相关的。要安装 Node，请前往项目的下载页面并获取适用于您系统的相关二进制文件。或者，您可能想考虑使用版本管理器，如“使用 nvm 安装 Node.js 的多个版本”中所述。

npm 与 Node 捆绑在一起，因此无需安装任何东西。但是，如果您在启动和运行方面需要任何帮助，请参阅我们的教程“ npm 初学者指南——节点包管理器”。

第三点可以通过从终端运行以下命令来实现：

npm install -g live-server

如果您发现自己需要sudo前缀（-nix 系统）或提升的命令提示符来执行此全局安装，您应该考虑更改全局包的位置。

满足这些要求后，我们可以在新文件夹中创建以下三个文件：

main.js，这是请求数据的 JavaScript 文件
example.json，这是示例 JSON 文件
index.html，这是调用 JavaScript 并显示数据的 HTML 页面

从命令提示符，我们可以简单地live-server在新文件夹中调用。这将在新的浏览器选项卡中打开我们的演示，运行地址为http://localhost:8080。

示例 JavaScript

以下代码是完整的客户端逻辑。它等待DOMContentLoaded加载的事件触发，然后获取对两个 DOM 元素的引用 — $showData，我们将在其中显示已解析的响应，以及$raw，我们将在其中显示完整的响应。

然后，我们将事件处理程序附加到clickID 元素的事件get-data。单击此元素时，我们尝试使用$.getJSON(),从服务器加载 JSON ，然后再处理响应并将其显示在屏幕上：

$(document).ready(() => {
  const $showData = $('#show-data');
  const $raw = $('pre');

  $('#get-data').on('click', (e) => {
    e.preventDefault();

    $showData.text('Loading the JSON file.');

    $.getJSON('example.json', (data) => {
      const markup = data.items
        .map(item => `<li>${item.key}: ${item.value}</li>`)
        .join('');

      const list = $('<ul />').html(markup);

      $showData.html(list);

      $raw.text(JSON.stringify(data, undefined, 2));
    });
  });
});

除了将对象的一部分转换为无序列表之外，整个对象也会被字符串化并显示在屏幕上。无序列表被添加到一个<div>带有 ID的元素中show-data，JSON 字符串是一个<pre>标签，因此它的格式很好。当然，对于我们的示例，数据是固定的，但通常任何类型的响应都是可能的。

请注意，我们还为输出设置了一些文本<div>。如果我们为 JSON 检索插入一些（人为的）延迟（例如，在浏览器的开发工具中），我们将看到这实际上在$.getJSON显示请求的任何结果之前执行。原因很简单：默认情况下，$.getJSON是非阻塞的——即异步。因此，回调将在稍后的某个（未知）时间点执行。

提取源以获得关键信息产生以下块：

$('#get-data').on('click', () => {
  $.getJSON('example.json', (data) => {
    console.log(data);
  });
});

在这里，我们只$.getJSON在调试控制台中打印返回的对象之前连接链接以触发帮助程序的启动。

示例 JSON

示例 JSON 文件比我们关心的子集大得多。尽管如此，该示例的构建方式可以显示大部分 JSON 语法。该文件写道：

{
  "items": [
    {
      "key": "First",
      "value": 100
    },
    {
      "key": "Second",
      "value": false
    },
    {
      "key": "Last",
      "value": "Mixed"
    }
  ],
  "obj": {
    "number": 1.2345e-6,
    "enabled": true
  },
  "message": "Strings have to be in double-quotes."
}

在示例 JavaScript 中，我们只操作与items键关联的数组。与普通的 JavaScript 不同，JSON 要求我们将键放在双引号中。此外，我们不能使用尾随逗号来指定对象或数组。然而，与普通的JavaScript数组，我们被允许插入不同类型的对象。

示例网页

我们已经查看了脚本和示例 JSON 文件。剩下的就是网页，它提供了 JavaScript 文件用来触发和显示 JSON 文件的部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Request JSON Test</title>
  </head>
  <body>
    <a href="#" id="get-data">Get JSON data</a>
    <div id="show-data"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

这里没什么好说的。我们使用官方网页上的 jQuery 缩小版。然后我们包含我们的脚本，它负责注入逻辑。

注意：由于我们将 JavaScript 文件包含在正确的位置（就在结束</body>标记之前），不再需要使用$(document).ready()回调，因为此时，文档将根据定义准备就绪。

演示

这就是我们最终的结果。

更通用的方法

如前所述，该$.ajax方法对于任何（不仅是与 JSON 相关的）Web 请求都是真正的交易。这种方法允许我们显式设置我们关心的所有选项。我们可以调整async到true如果我们想这个打电话并发运行-也就是说，在同一时间其他代码可能运行。将其设置为false将阻止其他代码在下载过程中运行：

$.ajax({
  type: 'GET',
  url: filename,
  data: data,
  async: false,
  beforeSend: (xhr) => {
    if (xhr && xhr.overrideMimeType) {
      xhr.overrideMimeType('application/json;charset=utf-8');
    }
  },
  dataType: 'json',
  success: (data) => {
    //Do stuff with the JSON data
  }
});

overrideMimeType调用该方法（覆盖服务器返回的 MIME 类型）仅用于演示目的。通常，jQuery 足够智能，可以根据使用的数据类型调整 MIME 类型。

在我们继续介绍 JSON 验证的概念之前，让我们先看一个更现实的例子。通常，我们不会请求静态 JSON 文件，而是会加载动态生成的 JSON（例如，作为调用 API 的结果）。JSON 生成依赖于一些必须事先提供的参数：

const url = 'https://api.github.com/v1/...';
const data = {
  q: 'search',
  text: 'my text'
};

$.getJSON(url, data, (data, status) => {
  if (status === 200) {
    //Do stuff with the JSON data
  }
});

在这里，我们检查状态以确保结果确实是从成功请求返回的对象，而不是包含错误消息的某个对象。确切的状态代码取决于 API，但对于大多数 GET 请求，状态代码 200 是常见的。

数据以对象的形式提供，将创建查询字符串（或传输请求正文）的任务留给 jQuery。这是最好和最可靠的选择。

JSON 验证

我们不应该忘记验证我们的 JSON 数据！有一个名为 JSONLint的在线 JSON 验证器工具可用于验证 JSON 文件。与 JavaScript 不同，JSON 非常严格并且没有容差——例如，对于前面提到的尾随逗号或多种编写键的方式（带/，不带引号）。

因此，让我们讨论一些在处理 JSON 时最常见的错误。

常见的 $.getJSON 错误

$.getJSON通话无提示失败。例如，如果jsoncallback=json1234已使用该函数而该函数json1234()不存在，则可能会发生这种情况。在这种情况下，$.getJSON会默默地出错。因此，我们应该始终使用jsoncallback=?来让 jQuery 自动处理初始回调。
在最好的情况下，使用真正的 JSON（而不是JSONP）（通过与我们自己的服务器交谈或通过CORS）。这消除了使用 JSONP 可能引入的一组错误。关键问题是：服务器/API 是否支持 JSONP？使用 JSONP 有什么限制吗？您可以在此处找到有关使用 JSONP 的更多信息。
Uncaught syntax error: Unexpected token（在 Chrome 中）或invalid label（在 Firefox 中）。后者可以通过将 JSON 数据传递给 JavaScript 回调来修复。但是，一般来说，这是 JSON 格式错误的强烈指示。考虑使用JSONLint，如上所述。

现在最大的问题是：我们如何检测错误是否确实存在于传输的 JSON 中？

如何修复 JSON 错误

在开始任何与 JSON 相关的调试之前，应该涵盖三个要点：

我们必须确保服务器返回的 JSON 格式正确，并且使用了正确的 MIME 类型。
我们可以尝试使用$.get而不是$.getJSON，因为我们的服务器可能返回无效的 JSON。此外，如果JSON.parse()返回的文本失败，我们立即知道 JSON 是罪魁祸首。
我们可以通过将数据记录到控制台来检查返回的数据。这应该是进一步调查的输入。

然后应从前面提到的 JSONLint 工具开始调试。

结论

JSON 是交换文本数据的事实上的标准格式。jQuery 的$.getJSON()方法为我们提供了一个很好的小帮手，可以处理几乎所有涉及对 JSON 格式数据的请求的场景。在本文中，我们研究了这个方便的助手附带的一些方法和可能性。

jQuery getjson（ajax get json）

什么是 JSON？

JSON jQuery 语法

示例应用程序

示例 JavaScript

示例 JSON

示例网页

演示

更通用的方法

JSON 验证

常见的 $.getJSON 错误

如何修复 JSON 错误

结论

发表评论

jQuery getjson（ajax get json）

什么是 JSON？

JSON jQuery 语法

示例应用程序

示例 JavaScript

示例 JSON

示例网页

演示

更通用的方法

JSON 验证

常见的 $.getJSON 错误

如何修复 JSON 错误

结论

相关推荐

变现引流什么意思（什么能快速变现什么能快速引流）

除了洗洁精还能用什么洗碗（小技巧分享）

外贸公司邮件群发软件哪个好（外贸用什么软件群发邮件）

成语未卜先知是什么意思（未卜先知的意思和造句）

OPPO Enco X2音质评测（OPPO Enco X2最新体验分享）

PS霓虹灯效果（ps霓虹灯光效果）

发表评论