Chrome jQuery AJAX失败，而不是跨域问题
我有一些简单的JS / jQuery代码来进行AJAX调用以获取一些HTML并将其推送到我页面上的div中。 这在Firefox中运行良好但在Chrome中失败。
在Chrome控制台中，我可以看到显示的状态文本为“（失败）”并输入“待定”的AJAX请求。
我搜索过的所有搜索都与跨域问题有关。 这不适合这里，我在网络服务器上运行它，带有域名，没有附加端口号。
这是我的代码示例（你可以看到我最初尝试使用.load（），同样的问题）：
$('#brochure2012navigation a').click(function(event) { event.preventDefault(); //$('#brochurePage').load($(this).attr('href')); $.ajax({ url: $(this).attr('href'), dataType: 'html', success: function(html) { $('#brochurePage').html(html); }, error: function (xhr, ajaxOptions, thrownError) { console.log(xhr); console.log(thrownError); }, }); }); 在Chrome的控制台中，记录的xhr对象如下所示：
Object {readyState: 0, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, overrideMimeType: function…} abort: function (a){a=a||"abort",p&&p.abort(a),w(0,a);return this} always: function (){i.done.apply(i,arguments).fail.apply(i,arguments);return this} complete: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this} done: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this} error: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this} fail: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this} getAllResponseHeaders: function (){return s===2?n:null} getResponseHeader: function (a){var c;if(s===2){if(!o){o={};while(c=bG.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c} isRejected: function (){return!!i} isResolved: function (){return!!i} overrideMimeType: function (a){s||(d.mimeType=a);return this} pipe: function (a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()} progress: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this} promise: function (a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a} readyState: 0 responseText: "" setRequestHeader: function (a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this} state: function (){return e} status: 0 statusCode: function (a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this} statusText: "error" success: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this} then: function (a,b,c){i.done(a).fail(b).progress(c);return this} __proto__: Object
抱歉这看起来有点乱，但我认为重要的是0的状态。
监视日志，请求没有命中我的服务器。
我真的很难过，我很感激任何帮助！
干杯，Al
AdBlock Chrome插件可能会阻止ajax调用。
根据adblock黑名单中的键，某些url可能会被屏蔽。 在DevTools Network选项卡上，此类请求标记为’failed’，状态为’pending’
您的代码看起来很完美，但在您的代码中看到了一些拼写错误，我添加了一些其他元素
$('#brochure2012navigation a').click(function(event){ event.preventDefault(); $.ajax({ url: $(this).attr('href'), dataType: 'html', async:false, // <------------------try with adding this type:'post', // <------------------try adding this too success: function(data) { $('#brochurePage').html(data); }, error: function (xhr, ajaxOptions, thrownError) { console.log(xhr); console.log(thrownError); } // <----------------------comma found here }); });
或者你可能会对此感兴趣：
$('#brochure2012navigation a').click(function(event){ event.preventDefault(); $.ajax({ url: $(this).attr('href'), type:'POST', success: function(response, status, xhr){ var ct = xhr.getResponseHeader("content-type") || ""; if (ct.indexOf("html") > -1) { $('#brochurePage').html(data); } if (ct.indexOf("json") > -1) { // handle json here } }, error: function (xhr, ajaxOptions, thrownError) { console.log(xhr); console.log(thrownError); } }); });
我对您的代码做了一些小改动：
var url = $(this).attr('href'); $.ajax({ url: url, ....
之后我将你的代码设置为jsfiddle：
我正在获取/ _display /（http://fiddle.jsshell.net/_display）的内容我正在链接到那个，因为你没有提供你想要加载的url，那是我唯一的网页可能会发现会返回数据，因为它不是跨域的。
我在Windows + Google Chrome版本24.0.1312.52 m上测试了代码
你可以测试小提琴并在这里发布结果吗？
它可能是错误函数关闭括号后的尾随逗号吗？ 通常只有在有其他对象时才会使用逗号…
我希望我有足够的声誉发表评论以询问更多细节，但我没有。 所以我会根据经验给出最好的猜测。
如果是跨域问题，Chrome会在控制台中以红色记录错误消息。 在这个小提琴中测试 。
我知道可以帮助的一种方法是使用嗅探器。 幸运的是Chrome有一个内置在Chrome Developer Tool中的简单版本，按下Ctrl + Shift + I ，我想您可能知道这一点，因为您已经复制了控制台输出，但这次转到Network选项卡，确保它保持打开状态单击触发此单击事件处理程序的链接。
您将看到表中显示的新记录，单击其名称，您可以查看请求并响应标题，甚至可以呈现响应。 希望这会给你更多有用的信息，因为我通常会在这里得到我的信息。
为什么你不试试这个
$('#brochurePage').load($(this).attr('href'),function(){ alert('Load was performed.'); });
祝好运！
ajax或json的最后一个属性并不以逗号结尾，毫无疑问它在chrome和IE中失败但是为什么在firefox中运行良好，我很难过:)，试试这个：
$('#brochure2012navigation a').click(function(event) { event.preventDefault(); //$('#brochurePage').load($(this).attr('href')); $.ajax({ url: $(this).attr('href'), dataType: 'html', success: function(html) { $('#brochurePage').html(html); }, error: function (xhr, ajaxOptions, thrownError) { console.log(xhr); console.log(thrownError); } }); });
如果它是跨域脚本问题，大多数浏览器实际上不会返回任何类型的有趣错误。 正如您所示，我使用的任何一个都返回StatusText为“error”和readyState为0。 您可能认为没有发生跨域操作，因为您实际上是在调用同一域中的某些内容，可能是不同的子域或不同的端口（https / non-https）。 你可能有一个过时的Firefox版本，不能弥补跨域限制。 您可以通过查看过去海报建议的网络请求并查找属性来validation您的Chrome：“来源：null”
如果它确实是一个跨域问题（我认为是），你需要将以下PHP行（或你选择的后端语言中的类似标题）添加到你所在文件的顶部在任何HTML代码之前请求 。
如果您使用jquery，您可能还需要：
如果您的服务器未收到任何请求，则问题必须位于您正在使用的URL中。
您是在键入协议和完整URL还是仅部分？
如果您对链接进行硬编码并使用它会发生什么？ （如下）
$('#brochure2012navigation a').click(function(event) { event.preventDefault(); //$('#brochurePage').load($(this).attr('href')); $.ajax({ url: $(this).attr('http://www.google.com'), dataType: 'html', success: function(html) { $('#brochurePage').html(html); }, error: function (xhr, ajaxOptions, thrownError) { console.log(xhr); console.log(thrownError); }, }); });
如果我是你，我会确保$ .ajax真正通过首先对已知目标进行硬编码来达到目标。
如果硬编码目标没有得到任何请求，则问题出在其他地方。