在离开页面之前获取Ajax请求

Question

我有一个js change事件，当用户离开控件时，它会通过Ajax请求保存数据。除非用户决定离开页面，否则此工作正常。然后Ajax没有完成，数据也没有保存。查看Ajax request with JQuery on page unload我看到如果我使请求同步，则Ajax请求将完成。我试过这个，它确实有效。但是，每当用户从页面上的控件移动到控件时我都会调用此更改事件，并且我不希望所有这些调用都是同步的。

我尝试使用Alert for unsaved changes in form检查未保存的数据。当存在未保存数据的控件时，这会触发beforeunload函数正常，但我无法计算出beforeunload函数中的内容。

• 我可以发出警报。当用户取消警报时，我的更改代码会运行，一切正常。然而，当用户正常保存数据而没有他们必须做任何事情时，用户弹出一个对话框是令人烦恼和困惑的
• 我尝试Using jQuery to test if an input has focus找到有焦点的元素，然后强制我的更改函数在此上运行。但是，我找不到一个有焦点的元素（可能在这里做错了什么？）
• 我尝试使用sleep函数来运行Ajax调用时间，但这不起作用
• 我尝试将焦点设置为另一个控件 - 没有运气

关于我尝试过的任何事情或者我尝试过的任何事情我可能做错了什么的任何想法？我可以以某种方式获得触发和取消的隐形警报，而无需用户做任何事情吗？

Answer 1

当用户离开页面时保存数据的唯一好方法是连续保存数据离线（localStorage），并在用户离开页面时未将数据保存到服务器时提醒用户。 localStorage的好处是，即使计算机崩溃或连接丢失，数据也会保存到浏览器中。当用户重新连接时，您可以将数据同步回服务器。
有关离线浏览器存储的更多信息：
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
http://diveintohtml5.info/storage.html

Answer 2

触发在卸载功能中同步的SEPARATE ajax调用。这样当页面卸载时，第二个AJAX调用（即阻塞）将触发，并且在保存完成之前页面将不会卸载，并且您的原始异步AJAX调用将保留用于页面的其余部分