Javascript 如何在页面卸载时执行ajax调用?
我有一个仪表板,用户可以在其中切换一些输入值,以便配置页面的外观 我希望将这些更改存储在DB表中,因此当用户返回时,仪表板将根据从DB检索到的特定用户配置显示 我知道如何将这些值发送到DB以及如何检索它们 我不想每次用户更改配置时都进行ajax调用 相反,我认为这个塞纳里奥会更好:Javascript 如何在页面卸载时执行ajax调用?,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有一个仪表板,用户可以在其中切换一些输入值,以便配置页面的外观 我希望将这些更改存储在DB表中,因此当用户返回时,仪表板将根据从DB检索到的特定用户配置显示 我知道如何将这些值发送到DB以及如何检索它们 我不想每次用户更改配置时都进行ajax调用 相反,我认为这个塞纳里奥会更好: 页面加载(如果存在,检索数据库配置) 用户切换配置ui项(例如,复选框、选择等),相应的客户端发生更改(一些div隐藏,一些显示等,配置输入值存储到隐藏字段),但不进行ajax调用 当用户单击指向另一个页面的链接时,
onbeforeunload
事件,如下所示:
window.onbeforeunload = function(e) {
// Perform the ajax call
return 'Do you want to save the configuration changes?';
};
但是,如果用户的浏览器阻止弹出窗口,该功能将不会执行
有没有一种方法可以在不调用对话框的情况下,对
onbeforeunload
事件执行ajax调用 否。卸载期间,浏览器将终止所有挂起的请求。因此AJAX可能到达服务器,也可能不到达服务器。您也不能在beforeunload
事件的处理程序中执行此操作,因为第一个A的意思是:异步->只是将请求放在堆栈上并最终执行它。因此,只有在处理程序返回后才会查看请求。但不久之后,浏览器将删除任何与页面相关的内容
解决方案是在用户进行更改时始终向服务器发送更新。将它们放入一个特殊的“临时”表中,以后可以从中恢复状态
您也可以在浏览器中使用类似于
localStorage
的内容,但这样,数据就不会随用户移动。例如,如果他们正在使用一台平板电脑,而该平板电脑出现故障或断电,他们可以移动到自己的电脑继续工作。你不能保证Ajax调用会以这种方式完成,请参见Aaron的回复。我的建议是使用类似于localStorage
的东西来读取/写入用户的设置
如果您需要用户的外观在多个设备上保持不变,请添加定期请求,以将本地存储的最新更新读/写到中央数据库。我认为
否
您不能假设用户想要关闭选项卡的窗口/选项卡。即使是onbeforeunload
如果用户取消您的弹出窗口也不起作用。我不知道它会100%起作用,但您可以尝试触发ajax在主体上删除鼠标功能。对于链接,向锚定标记添加一个事件侦听器。您可以使用WebSocket。即使您支持较旧的IE,我相信也有可用的垫片。>>解决方案是始终向服务器发送更新