如何在页面卸载时执行ajax调用？ [英] How to perform an ajax call on page unload?

问题描述

我有一个仪表板，用户可以在其中切换一些输入值以配置页面的外观。

I have a dashboard where users can toggle some input values in order to configure the appearance of the page.

我想将这些更改存储在数据库表中，所以当用户回来时，仪表板会根据从数据库中检索到的特定用户配置显示。

I want to store those changes in a DB table, so when user comes back, the dashboard appears according to the specific user configuration retrieved from the DB.

我知道如何将这些值发送到DB以及如何检索它们

每次用户更改配置时，我都不想进行ajax调用。

I don't want to make ajax calls every time the user changes a configuration.

相反，我认为这种情况会更好：

Instead, I think this senario would be better:

1. 页面加载（检索数据库配置（如果存在））


2. 用户切换配置项目（例如复选框，选择等）并进行相应的客户端更改（某些div被隐藏） ，其他一些显示等，配置输入值存储到隐藏字段），但没有ajax调用发生。


3. 当用户点击链接到另一页，配置输入值（已存储到隐藏字段）通过ajax调用发送到DB。

1. Page load (retrieve DB configuration if exist)
2. User toggles the configuration ui items (e.g. checkboxes, select etc) and the appropriate client side changes take place (some divs get hidden, some others are shown etc and the config input values are stored to a hidden field), but no ajax call takes place.
3. When user clicks a link to another page, the configuration input values (which have been stored to the hidden field) are sent to the DB via ajax call.

我的问题

一个解决方案（？）将使用 onbeforeunload 这样的事件：

One solution(?) would be the use of onbeforeunload event like this:

window.onbeforeunload = function(e) {
   // Perform the ajax call
   return 'Do you want to save the configuration changes?';
};  

但是，如果用户的浏览器阻止弹出窗口，该函数将无法执行？

But, if the user's browser prevent popups, the function will not get executed?

有没有办法在 onbeforeunload 事件上执行ajax调用，而不调用对话框？

Is there a way to perform an ajax call on onbeforeunload event, without calling a dialog box?

推荐答案

不。在卸载期间，浏览器将终止所有挂起的请求。因此AJAX可能会或可能不会到达服务器。您也无法在 beforeunload 事件的处理程序中执行此操作，因为 AJAX 表示：异步 - >只需将请求放在堆栈上，最终执行它。因此，只有在处理程序返回后才会查看请求。但在此之后不久，浏览器将杀死与页面相关的任何内容。

No. During unload, the browser will kill all pending requests. So the AJAX might or might not arrive at the server. You also can't do it inside the handler of the beforeunload event because the first A in AJAX means: Asynchronous -> Just put the request on the stack and eventually execute it. So the request will be looked at only after the handler returns. But very soon after that, the browser will kill anything related to the page.

解决方案是在用户进行更改时始终向服务器发送更新。将它们放入一个特殊的临时表中，以后可以从中恢复状态。

The solution is to always send updates to the server while the users makes changes. Put those into a special "temporary" table from which you can restore the state later.

您还可以使用 localStorage 在浏览器中然后，数据不会随用户移动。例如，如果他们在平板电脑上工作并且损坏或断电，他们可以移动到他们的PC继续他们离开的地方。

You could also use something like localStorage in the browser but then, the data wouldn't move with the user. For example if they were working on an tablet and that broke or had a power loss, they could move to their PC to continue where they left off.

这篇关于如何在页面卸载时执行ajax调用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！