为了添加一些基本的错误处理,我想重写一段代码,该代码使用jQuery的$ .getJSON从Flickr中提取一些照片。这样做的原因是$ .getJSON不提供错误处理或不处理超时。
由于$ .getJSON只是$ .ajax的包装,因此我决定重写该内容并感到惊讶,它可以完美地工作。
现在,乐趣开始了。当我故意导致404(通过更改URL)或导致网络超时(由于未连接到互连网)时,错误事件根本不会触发。我对我做错了事感到茫然。非常感谢您的帮助。
这是代码:
$(document).ready(function(){ // var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne"; // correct URL var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne_______"; // this should throw a 404 $.ajax({ url: jsonFeed, data: { "lang" : "en-us", "format" : "json", "tags" : "sunset" }, dataType: "jsonp", jsonp: "jsoncallback", timeout: 5000, success: function(data, status){ $.each(data.items, function(i,item){ $("<img>").attr("src", (item.media.m).replace("_m.","_s.")) .attr("alt", item.title) .appendTo("ul#flickr") .wrap("<li><a href=\"" + item.link + "\"></a></li>"); if (i == 9) return false; }); }, error: function(XHR, textStatus, errorThrown){ alert("ERREUR: " + textStatus); alert("ERREUR: " + errorThrown); } }); });
我想补充一点,当jQuery在1.4.2版本时,这个问题被问到了
jQuery 1.5及更高版本对JSONP请求的错误处理提供了更好的支持。但是,您需要使用$.ajax方法而不是$.getJSON。对我来说,这有效:
$.ajax
$.getJSON
var req = $.ajax({ url : url, dataType : "jsonp", timeout : 10000 }); req.success(function() { console.log('Yes! Success!'); }); req.error(function() { console.log('Oh noes!'); });
当10秒后没有成功的请求时,超时似乎可以解决问题并调用错误处理程序。
我也对此主题做了一个小博文。