Ajax / jQuery.getJSON简单示例
2017-02-18 09:10
344 查看
在本文中，我们将研究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 = '<li>' + items.join('</li><li>') + '</li>';
var list = $('<ul />').html(content);
showData.append(list);
}
});
showData.text('Loading the JSON file.');
});
});
除了将对象的部分转换为无序列表外，整个对象也会打印在浏览器的调试控制台中。输出到生成的ID元素中。即使元素正在为每个请求重置，我们只填充它，如果生成的JSON对象包含任何项目。当然，对于我们的示例，数据是固定的，然而，一般来说任何种类的响应是可能的。<div>show-data
我们还设置了输出一些文字。如果我们插入了JSON检索一些（人工）延迟，我们会看到任何结果之前，这实际上执行显示的要求。原因很简单：在默认情况下是无阻塞，即异步。因此，回调将在稍后的某个时间点（未知）执行。<div>$.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文件的部分的网页。
<!DOCTYPE html>
<html>
<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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="example.js"></script>
</body>
</html>
这里没有什么可说的。我们使用jQuery的精简版本（旧版本1.9.1，这当然足以满足我们的目的）从官方网页。然后我们包括我们的脚本，它负责注入逻辑。
注：由于我们包括在正确的位置我们的JavaScript文件（刚刚闭幕前标记），它不再有必要使用一个回调，因为在这一点上，该文件将被定义准备。</body>$(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是
4000
聪明的，以根据使用的数据类型调整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
什么是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 = '<li>' + items.join('</li><li>') + '</li>';
var list = $('<ul />').html(content);
showData.append(list);
}
});
showData.text('Loading the JSON file.');
});
});
除了将对象的部分转换为无序列表外，整个对象也会打印在浏览器的调试控制台中。输出到生成的ID元素中。即使元素正在为每个请求重置，我们只填充它，如果生成的JSON对象包含任何项目。当然，对于我们的示例，数据是固定的，然而，一般来说任何种类的响应是可能的。<div>show-data
我们还设置了输出一些文字。如果我们插入了JSON检索一些（人工）延迟，我们会看到任何结果之前，这实际上执行显示的要求。原因很简单：在默认情况下是无阻塞，即异步。因此，回调将在稍后的某个时间点（未知）执行。<div>$.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文件的部分的网页。
<!DOCTYPE html>
<html>
<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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="example.js"></script>
</body>
</html>
这里没有什么可说的。我们使用jQuery的精简版本（旧版本1.9.1，这当然足以满足我们的目的）从官方网页。然后我们包括我们的脚本，它负责注入逻辑。
注：由于我们包括在正确的位置我们的JavaScript文件（刚刚闭幕前标记），它不再有必要使用一个回调，因为在这一点上，该文件将被定义准备。</body>$(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是
4000
聪明的，以根据使用的数据类型调整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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery简单ajax示例_读取json文件数据
- jQuery基于ajax操作json数据简单示例
- jquery的$.ajax()和$.getJSON()方法简单笔记
- 简单理解jQuery中$.getJSON、$.get、$.post、$.ajax用法
- jquery返回json类型数据集合简单实现ajax返回多个数据
- 前端使用Jquery的getJSON方法，后台使用PHP，解决IE和火狐Firefox中存在的跨域ajax请求问题。
- 基于JQUERY的AJAX 简单示例 入门知识
- 详细解读Jquery的$.get()---$.post()---$.ajax()---$.getJSON()用法
- 详细解读Jquery的$.get(),$.post(),$.ajax(),$.getJSON()用法
- jQuery中$.get、$.post、$.getJSON和$.ajax的用法
- jquery-ajax简单示例
- 用AJAX的Get和Post调用Servlet的简单示例
- jquery的ajax方式调用json简单例子
- jquery之利用ajax与服务器交谈(发起GET和POST请求之获取JSON数据)
- 详细解读 Jquery 的$.get(),$.post(),$.ajax(),$.getJSON()等事件用法
- jquery ajax send json to action and get response from action
- 通过jquery的$.getJSON自己做一个跨域ajax请求试验
- jQuery中各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()
- 详细解读Jquery的$.get(),$.post(),$.ajax(),$.getJSON()用法
- Struts+jquery+ajax简单整合示例