javascript - 页面重定向后 JQuery POST 中止

Question

我有 JQuery ajax POST 操作，它将一些数据保存到数据库中。该操作大约需要不到 20 毫秒。这段 javascript 嵌入在 .NET Web Forms 应用程序中(不受我的控制)。此 .NET 应用程序在提交按钮内触发我的 POST 并重定向到另一个页面。现在，对于以下浏览器，POST 永远不会执行:

• Windows 上的 FF
• MAC 上的 Safari
• Mac 上的 Chrome

IE 运行良好，甚至 Windows 上的 Chrome 也运行良好。

因此，我做了一些测试，并尝试模仿 .NET Web Forms 网站，幸运的是，我可以通过在保存操作后直接添加“window.location =“转到另一个站点””来重现该网站。这是我的(剥离的)代码:

//BUTTON
$('#someSaveButton').click(function () {          
    GlobalObject.save();
});

// GLOBAL OBJECT CONTAINING ALL MY ACTIONS (delete, check, save, get)
var GlobalObject = (function () {
    return {
        save: function () {
            ...
            someMode.save(); //NOTE: Depending on an url parameter different save methods are supported
            window.location.href = "http://www.google.com"; //MIMIC-ING REQUEST ABORTING
        }
    };
})();

//EVENTUALLY THE SAVE:
function save() {
    $.ajax({
        type: "POST",
        cache: false,
        url: ...,
        data: ...,
    contentType: "application/json",
        dataType: "json",

        success: function (response) {
            ...
        },
        error: function (msg) {
            ...
        }
    });
}

上面的内容重现了相同的 POST 中止行为。注意:浏览器调试器到达 $.ajax 语句，但永远不会返回“成功”或“错误”。

我终于找到了:我在 ajax 调用中添加了“async : false”，一切似乎都工作正常!

现在我想确定这是否是一个正确的解决方案，因为当我在 JQuery 网站上阅读时:

从 jQuery 1.8 开始，不推荐使用 async: false 和 jqXHR ($.Deferred) ；您必须使用 success/error/complete 回调选项，而不是 jqXHR 对象的相应方法，例如 jqXHR.done() 或已弃用的 jqXHR.success()。

我感觉“async: false”可能不是一个好的解决方案。我的 Javascript 构建没问题吗？我的背景是 C#，我仍在学习/努力如何在 javascript 类定义中正确嵌入/使用函数。所以也许我的错误与我的函数的错误构造有关(并且 javascript 垃圾收集器正在清理东西或其他东西)。

Answer 1

或者，您可以进行重定向(window.location.href = "http://www.google.com";)，而不是将 async 设置为 false ) 在 $.ajax 调用的 success 回调中(并保留 async: true):

//BUTTON
$('#someSaveButton').click(function () {          
    GlobalObject.save();
});

// GLOBAL OBJECT CONTAINING ALL MY ACTIONS (delete, check, save, get)
var GlobalObject = (function () {
    return {
        save: function () {
            // ...
            someMode.save(); //NOTE: Depending on an url parameter different save methods are supported
        }
    };
})();

//EVENTUALLY THE SAVE:
function save() {
    $.ajax({
        type: "POST",
        cache: false,
        url: ...,
        data: ...,
    contentType: "application/json",
        dataType: "json",

        success: function (response) {
            // do stuff
            // more stuff
            // ... redirect when completed stuff
            window.location.href = "http://www.google.com"; //MIMIC-ING REQUEST ABORTING
        },
        error: function (msg) {
            // ...
        }
    });
}

希望有帮助。