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是与“保存”按钮一起使用的SAME功能（不需要重定向）。如果我在ajax成功调用中添加重定向，则用户将被重定向。如果用户点击另一个链接，则仅需要此重定向，因此需要首先进行保存，然后重定向

Answer 1

创建一个类似

的超链接

<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();
          }
    });
}

Answer 2

尝试在更新功能中向代码添加变量：

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

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

success: function (html) {

    // Other code here

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

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

update( false );

或者从重定向选项：

update( true );

或者，您可以将更新函数包装在另一个调用中，或者进一步抽象两个调用，但在这种情况下这很有效。可能你应该有两个函数而不是一个函数，他们应该根据需要调用其他函数。

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

2 个答案: