Question

我正在设计一个相当长的表单，每隔几分钟就会自动保存（即使用Ajax，表单数据将被插入或更新到MySQL数据库中）。但是，如果用户在提交表单之前决定退出页面，我想确保删除插入数据库的行。如果用户只需单击其他链接或表单的“取消”按钮，则可以轻松执行此操作。但我担心用户会发生什么：1）关闭页面，2）重新加载页面，或3）点击浏览器的后退（或前进）按钮。我知道如何使用unload事件创建一个确认对话框，要求用户确认他们要离开页面。但我不知道的是如果用户单击OK（“按OK继续”），如何进行Ajax调用（从数据库中删除该行）。如果用户在卸载事件期间单击“确定”按钮，是否有任何方法可以调用函数？

window.onbeforeunload = function() {
    if ($('#changes_made').val() == 'yes') //if user (partially) filled out the form
        {
            return "Are you sure?"
            if (/*user clicks OK */)  //What should the if statement evaluate here?
            {
                //make Ajax call
            }
        }
};

Answer 1

$(document).ready(function() {   
    $(':input',document.myForm).bind("change", function() { 
       setConfirmUnload(true); 
    }); // Prevent accidental navigation away
});

function setConfirmUnload(on) {
     // To avoid IE7 and prior jQuery version issues   
     // we are directly using window.onbeforeunload event
     window.onbeforeunload = (on) ? unloadMessage : null;
}

function unloadMessage() {

    if(Confirm('You have entered new data on this page.  If you navigate away from this page without first saving your data, the changes will be lost.')) {

            $.ajax({
               type: "POST",
               url: "some.php",
               data: "name=John&location=Boston",
               success: function(msg){
                 alert( "Data Saved: " + msg );
               }
             });

    }

}

确保您已升级jQuery版本。 jQuery版本1.3.2有一个错误：

Ticket #4418: beforeunload doenst work correctly

或使用原生功能：

window.onbeforeunload = function() {....}

如果用户单击“确定”，则在卸载时调用Ajax

1 个答案: