如何在页面卸载时执行ajax调用?

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

我想将这些更改存储在数据库表中,因此当用户返回时,根据从数据库检索的特定用户配置显示仪表板。

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

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

相反,我认为这种情况会更好:

  1. 页面加载(检索数据库配置,如果存在)
  2. 用户切换配置ui项(例如复选框,选择等)并发生相应的客户端更改(某些div被隐藏,其他一些显示等,配置输入值存储到隐藏字段),但没有ajax调用需要地方
  3. 当用户单击指向另一个页面的链接时,配置输入值(已存储到隐藏字段)将通过ajax调用发送到DB。

我的问题

一个解决方案(?)将使用onbeforeunload事件,如下所示:

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

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

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

在卸载期间,浏览器将终止所有待处理的请求。 因此AJAX可能会或可能不会到达服务器。 您也无法在beforeunload事件的处理程序中执行此beforeunload因为AJAX中的第一个A意味着: 异步 – >只需将请求放在堆栈上并最终执行它。 因此,只有在处理程序返回后才会查看请求。 但在此之后不久,浏览器将杀死与该页面相关的任何内容。

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

您也可以在浏览器中使用类似localStorage东西,但随后,数据不会随用户移动。 例如,如果他们在平板电脑上工作并且断电或断电,他们可以移动到他们的PC继续他们离开的地方。

您不能保证以这种方式完成Ajax调用,请参阅Aaron的回复。 我的建议是使用像localStorage这样的东西来读/写用户的设置。

如果您需要用户的外观在多个设备上保持不变,请添加定期请求以从localStorage读取/写入最新更新到中央数据库。