8

我有一些简单的 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 的状态。

监控日志，请求没有命中我的服务器。

我真的很难过，我会很感激任何帮助！

干杯，艾尔

4

9 回答 9

5

AdBlock Chrome 插件可能会阻止 ajax 调用。

根据 adblock 黑名单上的键，某些 URL 可能会被阻止。在 DevTools Network 选项卡上，此类请求被标记为“失败”，处于“待处理”状态

于 2013-09-24T14:45:05.197 回答
1

你的代码看起来很完美，但在你的代码中发现了一些错别字，我添加了一些其他元素

 $('#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);
       }
    });
  });
于 2013-02-01T12:17:43.743 回答
0

我对您的代码做了一些小改动：

var url = $(this).attr('href');
$.ajax({
    url: url,
....

之后，我将您的代码设置为在 jsfiddle 上工作：

http://jsfiddle.net/kyz69/1/

我正在获取 /_display/ 的内容（http://fiddle.jsshell.net/_display）我正在链接到该内容，因为您没有提供您要加载的网址，这是我唯一的页面可以发现它会返回数据，因为它不是跨域的。

我在 Windows + Google Chrome 版本 24.0.1312.52 m 上测试了代码

您可以测试小提琴并在此处发布结果吗？

于 2013-01-26T14:43:29.253 回答
0

可能是错误函数的右大括号后面的逗号吗？通常，如果有其他对象，您只会使用逗号...

于 2013-01-29T00:39:37.537 回答
0

我希望我有足够的声誉来发表评论以询问更多细节，但我没有。所以我会根据经验给出我最好的猜测。

如果是跨域问题，Chrome 会在控制台中以红色记录错误消息。在这个 Fiddle 中测试。

我知道可以提供帮助的一种方法是使用嗅探器。幸运的是 Chrome 内置了一个简单的Chrome Developer Tool，通过按Ctrl + Shift + I，我猜你可能知道这一点，因为你已经复制了控制台输出，但是这次转到Network选项卡，确保当你点击触发这个点击的链接时它保持打开状态事件处理程序。

您将在表中看到一条新记录，单击其名称，您可以查看请求和响应标头，甚至呈现响应。希望这会给你更多有用的信息，因为我通常在这里得到我的信息。

于 2013-01-29T21:26:28.430 回答
0

为什么你不试试这个

$('#brochurePage').load($(this).attr('href'),function(){
alert('Load was performed.');
});

祝你好运！

于 2013-01-30T00:02:00.987 回答
0

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);
        }
    });
});
于 2013-01-31T12:06:10.967 回答
0

如果是跨域脚本问题，大多数浏览器实际上不会返回任何有趣的错误。正如您所展示的，我使用过的任何一个都返回“错误”的 StatusText 和 0 的 readyState。您可能认为没有跨域操作发生，因为您实际上是从同一个域调用某些东西，可能是不同的子域或不同的端口（https/non-https）。您可能拥有无法弥补跨域限制的过时版本的 Firefox。您可以通过查看过去的海报所建议的网络请求来验证您的 Chrome，并查找属性：“Origin：null”

如果它确实是一个跨域问题（我认为是），您将需要将以下 PHP 行（或您选择的后端语言中的类似标头）添加到您所在文件的顶部在任何 HTML 代码之前请求。

<?php header("Access-Control-Allow-Origin: example.com"); ?>

如果你使用 jquery，你可能还需要：

<?php header("Access-Control-Allow-Headers: x-requested-with"); ?>
于 2013-01-31T22:22:05.660 回答
0

如果您的服务器没有收到任何请求，那么问题一定出在您正在使用的 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 真的达到了它的目标。

如果硬编码的目标没有收到任何请求，则问题出在其他地方。

于 2013-02-01T00:26:28.337 回答