加载 JSON文件"/>
jQuery 加载 JSON文件
$(document).ready(function() {// 使用jQuery的AJAX方法来加载JSON文件$.ajax({url: 'data.json',dataType: 'json',success: function(data) {// 加载成功后，将获取到的数据显示在页面上$('#data').text(JSON.stringify(data));},error: function() {console.log('无法加载JSON文件');}});
});
发送到服务器的数据将作为查询字符串追加到 URL。如果参数的值是纯对象，则在附加到 URL 之前，会将其转换为字符串并进行 URL 编码。data
大多数实现将指定成功处理程序：
$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});当然，此示例依赖于 JSON 文件的结构：
{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}使用此结构，该示例循环访问请求的数据，生成一个无序列表，并将其追加到正文中。
回调传递返回的数据，该数据通常是由 JSON 结构定义并使用该方法解析的 JavaScript 对象或数组。它还传递响应的文本状态。success$.parseJSON()
从 jQuery 1.5 开始，回调函数接收一个“jqXHR”对象（在 jQuery 1.4 中，它接收到该对象）。但是，由于 JSONP 和跨域 GET 请求不使用 XHR，因此在这些情况下，传递给成功回调的 and 参数是未定义的。successXMLHttpRequestjqXHRtextStatus
重要：从 jQuery 1.4 开始，如果 JSON 文件包含语法错误，则请求通常会以静默方式失败。因此，请避免频繁手动编辑 JSON 数据。JSON 是一种数据交换格式，其语法规则比 JavaScript 的对象文字表示法更严格。例如，JSON 中表示的所有字符串，无论是属性还是值，都必须用双引号括起来。有关JSON格式的详细信息，请参阅 JSON。
JSONP格式
如果 URL 包含字符串“callback=？”（或类似，如服务器端 API 所定义），则将请求视为 JSONP。有关详细信息，请参阅中对数据类型的讨论。jsonp$.ajax()
jqXHR 对象
从 jQuery 1.5 开始，所有 jQuery 的 Ajax 方法都返回对象的超集。此 jQuery XHR 对象或“jqXHR”由 实现 Promise 接口返回，为其提供 Promise 的所有属性、方法和行为（有关详细信息，请参阅延迟对象）。（表示成功）、（表示错误）和（表示完成，无论是成功还是错误;在 jQuery 1.6 中添加）方法采用一个函数参数，该参数在请求终止时调用。有关此函数接收的参数的信息，请参阅文档的 jqXHR 对象部分。XMLHTTPRequest$.getJSON()jqXHR.done()jqXHR.fail()jqXHR.always()$.ajax()
jQuery 1.5 中的 Promise 接口还允许 jQuery 的 Ajax 方法（包括 、）在单个请求上链接多个 、 和回调，甚至可以在请求完成后分配这些回调。如果请求已经完成，则立即触发回调。$.getJSON().done().always().fail()
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "example.json", function() {console.log( "success" );
}).done(function() {console.log( "second success" );}).fail(function() {console.log( "error" );}).always(function() {console.log( "complete" );});// Perform other work here ...// Set another completion function for the request above
jqxhr.always(function() {console.log( "second complete" );
});| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // Assign handlers immediately after making the request, // and remember the jqxhr object for this request var jqxhr = $.getJSON( "example.json", function() { console.log( "success" ); }) .done(function() { console.log( "second success" ); }) .fail(function() { console.log( "error" ); }) .always(function() { console.log( "complete" ); }); // Perform other work here ... // Set another completion function for the request above jqxhr.always(function() { console.log( "second complete" ); }); |
弃用通知
从 jQuery 3.0 开始，删除了 、 和 callback 方法。您可以使用 、 和 代替。jqXHR.success()jqXHR.error()jqXHRplete()jqXHR.done()jqXHR.fail()jqXHR.always()
附注事项：
- 由于浏览器安全限制，大多数“Ajax”请求都受同源策略的约束;请求无法成功从其他域、子域、端口或协议检索数据。
- 脚本和 JSONP 请求不受同源策略限制。
例子：
从 Flickr JSONP API 加载雷尼尔山的四张最新照片。
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>jQuery.getJSON demo</title><style>img {height: 100px;float: left;}</style><script src=".7.0.js"></script>
</head>
<body><div id="images"></div><script>
(function() {var flickerAPI = ".gne?jsoncallback=?";$.getJSON( flickerAPI, {tags: "mount rainier",tagmode: "any",format: "json"}).done(function( data ) {$.each( data.items, function( i, item ) {$( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );if ( i === 3 ) {return false;}});});
})();
</script></body>
</html>更多推荐
jQuery 加载 JSON文件
发布评论