在onbeforeunload中使用Ajax自动保存字段数据

Question

我正在尝试在 window.onbeforeunload 函数中使用 AJAX 来自动保存我网站页面上的文本字段（没有保存按钮，这一切都是在后台完成的）。保存功能是用PHP编写的。我首先尝试以下操作：

window.onbeforeunload = function(e){
  var noteelement = document.getElementById( 'note' );
  var mynote = noteelement.value;

  $.post('save_my_note.php', { thenote: mynote }, function(data){});
  };

在研究中，我逐渐了解到，由于 ajax 调用的异步性质，不会调用 php 代码，因为窗口在函数从服务器触发之前关闭。

当然，正如其他人所说，如果我向 onbeforeunload 函数添加一个返回值以导致弹出对话框（这将是“您确定要离开吗”框），那么它确实可以工作，因为 .post 调用在对话框等待响应时有时间运行：

  $.post('save_my_note.php', { thenote: mynote }, function(data){});
  return mynote;
  };

据说我必须将此 post 调用更改为异步 AJAX，以便该函数等待函数完成，但不太熟悉语法，我不太确定我需要的语法。我尝试了以下方法来代替 post 函数：

        $.ajax({
            url: "save_my_note.php",
            data: "{thenote: mynote}",
            async: false                 
        });

但是，这似乎也不起作用。

有谁有一个简单的代码示例，用于通过 onbeforeunload （或 onunload？？） 函数以同步方式实现自动保存？我不是 javascript 或 jquery 专家，而且我在网上找到的示例令人困惑。

Answer 1

您的最后一个示例应该可以工作，您需要将 asynch: false 更改为 async: false （必须删除额外的 h）根据 jQuery 文档

Answer 2

也许你可以强制超时暂停 - 不知道这是否真的有效，只是猜测：

var bSaved = false;
window.onbeforeunload = function(e){
  bSaved = false;
  var noteelement = document.getElementById( 'note' );
  var mynote = noteelement.value;

  $.post('save_my_note.php', { thenote: mynote }, function(data){ bSaved = true; });

  window.setTimeout('bSaved = true',2000);

  while (!bSaved) {}

  };