Ajax / jQuery.getJSON简单示例

在本文中，我们将研究JSON的重要性以及为什么要在应用程序中使用JSON。 我们将看到jQuery为我们提供了非常不错的便捷功能 。

什么是JSON？

JSON代表JavaScript Object Notation。 简而言之，JSON是一种格式化数据的方式，例如，通过网络传输数据。 在本文中，我们将研究如何使用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参数外，我们还可以传入两个可选参数。 一个代表要发送到服务器的数据，另一个代表在成功响应的情况下触发的回调。

因此，这三个参数对应于：

1. url参数是一个字符串，其中包含将请求发送到的URL。
2. 可选的data参数是对象或随请求发送到服务器的字符串。
3. 可选的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提供服务器（尽管任何服务器都可以）。 这意味着我们需要以下三件事：

1. Node.js的有效安装。
2. 节点程序包管理器（npm）。
3. http-server软件包的全局安装。

前两点与平台有关。 如果您需要帮助来设置它们中的任何一个，则可能需要查看我们的教程： npm入门指南— Node Package Manager或Node的下载页面 （npm与Node捆绑在一起）。

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

npm install http-server -g

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

满足这些要求后，我们可以将以下三个文件放入新文件夹中：

1. example.js是用于请求数据的JavaScript文件。
2. example.json是代表我们的对象的示例JSON文件。
3. index.html是用于调用JavaScript并显示数据的HTML页面。

在命令提示符下，我们可以简单地在新文件夹中调用http-server 。 现在http：// localhost：8080应该正在运行演示。

示例JavaScript

以下代码是完整的客户端逻辑。 在将事件处理程序附加到ID为get-data的元素的click事件之前，它将等待DOMContentLoaded加载事件。 单击此元素后，我们尝试使用$.getJSON()从服务器加载JSON，然后再处理响应并将其显示在屏幕上。

$(document).ready(function () {
  $('#get-data').click(function () {
    var showData = $('#show-data');

    $.getJSON('example.json', function (data) {
      console.log(data);

      var items = data.items.map(function (item) {
        return item.key + ': ' + item.value;
      });

      showData.empty();

      if (items.length) {
        var content = '
' + items.join('
') + '
';
        var list = $('
').html(content);
        showData.append(list);
      }
    });

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

除了将对象的某些部分转换为无序列表之外，完整的对象还将在浏览器的调试控制台中打印。 输出将在

元素中以ID show-data 。 即使为每个请求都重置了元素，我们也仅在生成的JSON对象完全包含任何项目的情况下才填充它。 当然，对于我们的示例，数据是固定的，但是，通常任何形式的响应都是可能的。

请注意，我们还为输出

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

提取源以获取关键信息将产生以下框：

$('#get-data').click(function () {
  $.getJSON('example.json', function (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文件的部分。

  
    
    
  
  
    Get JSON data
    

    
    
  

这里没有太多要说的。 我们从官方网页上使用了jQuery的缩小版本（旧版本1.9.1，足以满足我们的目的）。 然后，我们包含脚本，该脚本负责注入逻辑。

注意 ：由于我们将JavaScript文件包含在正确的位置（在标记之前），因此不再需要使用$(document).ready()回调，因为在这一点上，该文档按照定义将准备就绪。

演示版

这就是我们最终得到的结果。

更通用的方法

如前所述， $.ajax方法是任何（不仅是与JSON相关的）Web请求的真实交易。 这种方法使我们可以显式设置我们关心的所有选项。 如果我们希望async调用可以同时运行，即可以与其他代码同时运行，则可以将async调整为true 。 将其设置为false将阻止在下载过程中运行其他代码。

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

仅出于演示目的而调用overrideMimeType方法（该方法将覆盖服务器返回的MIME类型）。 通常，jQuery很聪明，可以根据所使用的数据类型来调整MIME类型。

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

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

$.getJSON(url, data, function (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有任何限制吗？
• 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格式数据请求的情况。 在本文中，我们研究了此便捷助手所附带的一些方法和可能性。

对于$.getJSON()还有其他最佳实践吗？

From: https://www.sitepoint.com/ajaxjquery-getjson-simple-example/