Ajax / jQuery.getJSON简单示例

在本文中，我们将研究JSON的重要性，以及为什么我们应该在我们的应用程序中使用它。我们将看到的jQuery已经得到了我们布满了非常漂亮的方便的功能。


什么是JSON？
JSON代表JavaScript对象符号。简单来说，JSON是一种格式化数据的方式，例如，通过网络传输数据。在本文中，我们将介绍使用HTTP GET请求加载JSON数据（我们还可以使用其他动词，例如POST）。


为什么我们选择JSON比做XML？使用JSON的关键优势是效率。JSON不那么冗长和混乱，导致更少的字节和更快的解析过程。这使我们能够处理更多作为JSON而不是XML发送的消息。此外，JSON有一个非常有效的和自然的对象表示格式如BSON，其中类JSON对象存储在二进制格式。


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


JSON jQuery语法
该方法是使用JSON工作直接，如果你不需要太多的额外配置一个方便的帮手。本质上，它归结为更普遍的$.ajax（）帮手，与正在使用隐式的正确的选项。方法签名是：$.getJSON()


$.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代码提取并处理。
示例JavaScript
以下代码是完整的客户端逻辑。它等待DOMContentLoaded一个事件处理程序安装于前加载的事件click与ID的元素的事件。当点击该元素我们尝试使用从服务器加载的JSON ，处理响应并在屏幕上显示它。get-data$.getJSON()


$(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元素中。即使元素正在为每个请求重置，我们只填充它，如果生成的JSON对象包含任何项目。当然，对于我们的示例，数据是固定的，然而，一般来说任何种类的响应是可能的。
show-data


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

$.getJSON$.getJSON


简单方法获得关键信息，代码以下：


$('#get-data').click(function () {
  $.getJSON('example.json', function (data) {
    console.log(data);
  });
});
在这里，我们仅在单击链接触发时，打印返回的数据在调试控制台。


示例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()


这是我们结束了。


还有更一般的方法。如已经提到的，该方法是真正的转变为任何（不仅JSON相关的）Web请求。这个方法允许我们显式地设置我们关心的所有选项。


$.ajax 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数据！有一个在线JSON验证工具，叫做JSONLint，它可以用来验证JSON文件。不同的JavaScript，JSON是非常严格的，没有偏差，如前面提到的尾随逗号或写入密钥的多种方式（有/，不带引号）。


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


常见的$ .getJSON错误
在无声的故障呼叫：例如，可能发生这种情况已被使用，而功能不存在。在这种情况下，将静默错误。因此，我们应该经常使用，让jQuery的自动处理的初始回调。$.getJSONjsoncallback=json1234json1234()$.getJSONjsoncallback=?
在最好的情况下，真正的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类型。
我们可以尝试使用$不用彷徨，而不是因为它可能是我们的服务器返回无效JSON。此外，如果在返回的文本出现故障，我们马上就知道了JSON是难辞其咎的。$.getJSON.parse()
我们可以通过将其记录到控制台来检查正在返回的数据。这应该是进一步调查的输入。
然后调试应该从前面提到的JSONLint工具开始。


结论


JSON是用于交换文本数据的事实上的标准格式。jQuery的方法为我们提供了一个很好的小帮手应对几乎任何情况下涉及的JSON格式的数据的请求。在这篇文章中，我们调查了一些方法和可能性与这个方便的帮手。$.getJSON()

火星时代教育 Jooding