Question

我有一个ajax调用，它作为函数的一部分执行，同时也将用户重定向到另一个页面。由于此代码在其他用户的网站上执行，我不想使用preventDefault()，因为这可能会影响用户体验，并且在我尝试过去时一直是导致许多问题的原因。如果通话失败的次数很少，那不是什么大不了的事，但根据我的经验，我已经看到它在所有浏览器中的表现非常一致。

ajax调用如下所示

$.ajax({
    type: 'GET',
    url: 'URL',
    dataType: 'json',
    success: function(data) {
        // stuff
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log("AJAX call failed. Status - " + textStatus);
        console.log("Reason - " + errorThrown); 
    }
});

但是对于一个特定的网站，我看到了一些非常奇怪的行为。它在Chrome中按预期执行。但是我在Safari和Firefox的控制台中看到了以下内容。

AJAX call failed. Status - error. 
Reason -

jqXHR对象上的readyState和status属性均为0.

URL不指向另一个域，因此我确信它不是因为跨域策略。

对其他类似的StackOverflow问题进行一些研究，如this one和this one，似乎浏览器会在ajax调用完成之前重定向。

我对以下事情感到好奇。

为什么我只在Safari和Firefox上看到这种行为？ Chrome是否更好地记住异步请求并确保它不会丢弃挂起的回调？
可以在不使用preventDefault的情况下修复吗？

Answer 1

我发现自己今天遇到类似的问题。该通话在IE和Chrome中运行良好，但在Safari和Firefox中无效（尽管实际网络请求返回200成功，数据刚刚消失）。

在$(document).ready()函数中包装我的AJAX调用似乎可以解决问题。

最初我把它放在ready函数之外，因为我工作的网站使用History API在页面之间导航（并且加载新内容会触发ready函数，复制已经加载的函数，而我只想制作每个站点访问一次这个AJAX调用。）

所以现在我每次加载页面时都会重新获取相同的数据，而不是只加载一次，但至少它在所有浏览器中都有效。如果你像我一样从谷歌那里得到这个问题，希望这对你有所帮助。

不知道为什么Firefox和Safari在DOM准备就绪之前无法正确完成AJAX调用...

Safari和Firefox上的ajax调用失败，没有任何错误，但适用于Chrome

1 个答案: