通过 AJAX 保存数据，一旦完成，然后重定向用户

Question

我正在处理通过 ajax 保存的表单，这部分工作得非常好。我遇到的问题是用户在保存表单之前单击另一个链接将用户重定向到另一个页面时丢失了数据。

作为一个解决方案，我想到了使用 JavaScript 函数，所以onclick 的超链接我提示用户在继续之前保存数据。我正在使用通过 AJAX 保存数据并在成功保存后重定向用户的相同功能。这就是我的提示的样子。

function saveThenRedirect(redirect) {
    if (confirm("Please save your data before moving away") == true) {
        update();// AJAX function that saves the data
        window.location = redirect;//redirect the user
    } else {
        window.location = redirect;
    }
}

事情在update()之前；函数有机会保存数据，用户被重定向或在保存重定向的过程中发生。所以这就是我需要帮助的地方，我该怎么做才能首先运行 update() 函数，并且只有在它完成运行重定向用户后才能运行？

注意：我确实查看了window.onbeforeunload，但我决定使用简单的提示，然后使用函数保存和重定向。

这就是我的update 函数的样子

function update() {
    $.ajax({
        type: "POST",
        url: "classes/data.class.php",
        data: $("#pay-form").serialize(),
        beforeSend: function () {
            $('#dvloader').show();
        },
        success: function (html) {
            var load1 = new $.Deferred();
            var load2 = new $.Deferred();
            var load3 = new $.Deferred();
            var load4 = new $.Deferred();

            $.when(load1, load2, load3, load4).then(function () {
                $('#dvloader').hide();
            });

            $('#income-expense-div').load('dashboard-sidebar.php', function () {
                load1.resolve();
            });
            $('#pay-div').load('dashboard-pay.php', function () {
                load2.resolve();
            });
            $('#assets-div').load('dashboard-assets.php', function () {
                load3.resolve();
            });
            $('#liabilities-div').load('dashboard-liabilities.php', function () {
                load4.resolve();
            });
        }
    });
}

我将非常感谢任何帮助。

请注意update 是与保存按钮一起使用的相同功能（不需要重定向）。如果我在 ajax 成功调用中添加重定向，用户将被重定向。仅当用户单击另一个链接时才需要此重定向，因此需要先进行保存，然后再进行重定向

Answer 1

尝试在代码中的更新函数中添加一个变量：

// Adding a redirect variable...
function update( redirect ) {

然后在成功函数内部，检查重定向变量...

success: function (html) {

    // Other code here

    if(redirect == true) {
        saveThenRedirect();
    }
}

然后当你从保存按钮调用更新时：

update( false );

或者来自重定向选项：

update( true );

或者，您可以将更新函数包装在另一个调用中，或者进一步抽象这两个调用，但这在这种情况下已经足够好用了。可能您应该有两个函数而不是一个，并且它们应该根据需要调用其他函数。

Answer 2

创建一个类似的超链接

<a data-href="url" href="javascript:void(0)" id="submitForm">Submit</a>

像这样绑定onclick事件

$("#submitForm").click(function(e){
    e.preventDefault();

    // store url in a variable
    var url=$(this).data("href");

    // create a callback in update() function which will be called when ajax request completes
    update(function(){
    // now redirect the user
     window.location = url;
    });

});

像这样在你的函数中添加回调

function update(callback) {
        $.ajax({
            type: "POST",
            url: "classes/fact-find-data.class.php",
            data: $("#pay-form").serialize(),
            beforeSend: function () {
                $('#dvloader').show();
            },
            success: function (html) {
           ...............................
            in the end
            callback();
          }
    });
}