如何在浏览器关闭时提交表单？绑定beforeunload代码失效求助

嗨，我来帮你搞定这个问题！你遇到的核心问题是：当浏览器触发beforeunload事件（比如关闭标签页、刷新页面）时，它不会等异步操作完成就直接卸载页面，所以你之前直接触发提交按钮点击的方式，大概率因为请求还没发出去就被中断了，自然没法保存数据。

下面给你几个靠谱的解决办法：

优先推荐：用navigator.sendBeacon API #

这是浏览器专门为页面卸载场景设计的API，它会异步发送数据但不会阻塞页面卸载，可靠性拉满，而且代码也简单：

window.addEventListener('beforeunload', function() {
  // 先把表单里的所有数据收集起来
  const formData = new FormData(document.querySelector('form'));
  // 替换成你的实际后端接口地址
  navigator.sendBeacon('/your-save-api', formData);
});

备选方案：同步AJAX请求（不推荐，影响体验） #

如果你的项目环境比较老，不支持sendBeacon，可以试试同步的AJAX请求，但要注意这个方法会让页面卸载时卡顿一下，用户体验不太好：

window.addEventListener('beforeunload', function() {
  const form = document.querySelector('form');
  const formData = new FormData(form);
  const xhr = new XMLHttpRequest();
  // 第三个参数设为false就是同步请求，浏览器会等请求完成再卸载
  xhr.open('POST', form.action, false);
  xhr.send(formData);
});

为啥你原来的代码没效果？ #

你之前写的代码有两个小问题：

1. jQuery里绑定事件现在推荐用on()，bind()已经被废弃啦；
2. 触发提交按钮的点击会发起异步的表单提交，而浏览器在beforeunload阶段根本不会等这个请求发完就关页面了，所以数据根本传不到后端。

最后再提个小建议：测试的时候别直接关标签页，用刷新页面来测试效果一样，还方便调试～

内容的提问来源于stack exchange，提问作者neha bhandge