关于用户刷新页面或直接关闭页面、浏览器时向后台发送请求的解决方案

本文主要是介绍关于用户刷新页面或直接关闭页面、浏览器时向后台发送请求的解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

用户退出登录时需要修改数据库的登录状态。画面上给了用户“登出”按钮，用于退出登录，跳转至登录画面，这样可以及时向后台发送请求，来修改数据库的登录状态。虽如此，有的用户还是习惯于直接关闭画面，或者浏览器，这个时候原来用axios向后台发送登出请求的方式就行不通了。于是乎，只能换别的招了，残念！最终调查总结出两种方法，亲测有效，就做此记录。

1、jquery

引入jQuery，使用ajax发送同步请求，代码如下：

window.onbeforeunload = () => {
    $.ajax({
      type: "POST",
      data: { name: "hyuga hinata" },
      url: "http://localhost:8080/closeTab",
      async: false
    });
};
其中onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。

2、原生js

如非必要，可以不用引入jquery，使用原生js发送请求也是可以的，代码如下：

window.onbeforeunload = () => {
    var xmlhttp = new XMLHttpRequest(); // 创建异步请求
    // xmlhttp.onreadystatechange = () => {
    //   status == 200 用来判断当前HTTP请求完成
    //   if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    //   console.log(xmlhttp.responseText);
    //   }
    };
    let data = new FormData();
    data.append("name", "hyuga hinata")
    xmlhttp.open("POST", "http://localhost:8080/closeTab", false); // 使用POST方法
    xmlhttp.send(data); // 发送同步请求
};
 因为关闭画面不需要对返回数据再做处理，上面的onreadystatechange 事件就注释掉了。

 测试结果截图

万岁！！！请求发送成功了。

两种方法的关键在于都是发送的同步请求，不能发送异步请求。所以当初使用axois不能满足需求。
--------------------- 
来源

这篇关于关于用户刷新页面或直接关闭页面、浏览器时向后台发送请求的解决方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---