Ajax/jQuery.getJSON的简单例子

145 阅读2分钟

Ajax/jQuery.getJSON Simple Example

在这篇文章中,我们将研究JSON的重要性以及为什么我们应该在我们的应用程序中使用它。我们将看到,jQuery已经为我们提供了一个非常好的便利功能

什么是JSON?

JSONJavaScript Object Notation的缩写。它是一种独立于语言、基于文本的格式,通常用于在网络应用中传输数据。在这篇文章中,我们将看看如何使用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的安装
  • node软件包管理器(npm)
  • 全局性的Live-server软件包的安装

前两点是与平台有关的。要安装Node,请前往项目的下载页面,为你的系统获取相关的二进制文件。另外,你也可以考虑使用一个版本管理器,如 "使用nvm安装多个版本的Node.js"中所述。

npm与Node捆绑在一起,所以不需要安装任何东西。然而,如果你需要任何帮助来启动和运行,请参考我们的教程《npm初学者指南--Node包管理器》。

第三点可以通过从你的终端运行以下内容来实现。

npm install -g live-server

如果你发现自己需要一个sudo 前缀(-nix系统)或一个升高的命令提示符来执行这个全局安装,你应该考虑改变全局包的位置

一旦这些要求得到满足,我们就可以在一个新的文件夹中创建以下三个文件。

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

在命令提示符下,我们可以简单地在新文件夹中调用live-server 。这将在一个新的浏览器标签中打开我们的演示,运行在http://localhost:8080[。](http://localhost:8080)

JavaScript样本

下面的代码是完整的客户端逻辑。它等待DOMContentLoaded 加载事件的发生,然后抓取两个DOM元素的引用--$showData ,在这里我们将显示解析后的响应,以及$raw ,在这里我们将显示完整的响应。

然后我们将一个事件处理程序附加到ID为get-data 的元素的click 事件上。当这个元素被点击时,我们尝试使用$.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));
    });
  });
});

除了将对象的一部分转换为无序列表外,完整的对象也被字符串化并显示在屏幕上。无序列表被添加到一个ID为show-data<div> 元素中,JSON字符串被添加到一个<pre> 标签中,这样它就被很好地格式化。当然,在我们的例子中,数据是固定的,但在一般情况下,任何类型的响应都是可能的。

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

为了获得关键的信息,对源文件进行了提炼,产生了下面的块。

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

在这里,我们只连接了链接,以触发$.getJSON 帮助器的启动,然后在调试控制台中打印返回的对象。

继续阅读Ajax/jQuery.getJSONSitePoint简单例子