在离开页面之前完成 Ajax 请求答案

【问题标题】：Get Ajax request to complete before leaving the page在离开页面之前完成 Ajax 请求
【发布时间】：2014-12-01 02:20:07
【问题描述】：

我有一个 js 更改事件，它在用户离开控件时通过 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 找到具有焦点的元素，然后强制我的更改功能在此运行。但是，我找不到有焦点的元素（可能这里做错了什么？）
我尝试使用睡眠功能让 Ajax 调用有时间运行，但这也不起作用
我尝试将焦点设置到另一个控件 - 没有运气

对于我还可以尝试什么或我尝试过的任何事情可能做错了什么有什么想法吗？我能否以某种方式在用户无需执行任何操作的情况下触发和取消不可见的警报？

【问题讨论】：

没有可靠的方法来做到这一点，原因很充分：如果 Ajax 请求可能导致浏览器在离开页面之前等待，那么一个聪明的站点可能会导致无法离开页面。无限期的页面。这可能而且会被不良行为者滥用。伊兹的以下建议很好。设计您的应用程序时假设用户可以随时离开，或者他们的互联网连接可能会丢失。阅读Offline First! 了解更多最佳实践。

标签： javascript jquery ajax

【解决方案1】：

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

【讨论】：

这听起来不错，但目前需要大量的重写才能实现。从长远来看，我计划设置我的网站的离线版本.. 但这将不得不等待。

【解决方案2】：

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

【讨论】：

我尝试创建一个单独的同步调用，但在保存期间我进行了多个 Ajax 调用，第一个是检查重复值，第二个是保存数据。我可以让第一个运行，但不能运行第二个。
您在另存为同步调用期间是否进行了两次调用？如果你不想这样做，你可以用 jQuery 回调将它们链接起来，在第一次调用成功时 => 执行第二次调用。
是的，这些调用在 jQuery 回调中，但它调用一个然后到达下一个并且不执行调用。我再看看，看看我能不能看到发生了什么。
现在可以了——我在使调用同步时出现了语法错误。所以我现在在我的beforeunload 例程中设置一个标志，它将我的 Ajax 调用设置为同步，调用我的控件上的保存例程，当它获得焦点时我将它保存到一个变量中，并且“Bob 是你的叔叔”。