关于用户刷新页面或直接关闭页面、浏览器时向后台发送请求的解决方案
2018-11-08 18:54
1451 查看
用户退出登录时需要修改数据库的登录状态。画面上给了用户“登出”按钮,用于退出登录,跳转至登录画面,这样可以及时向后台发送请求,来修改数据库的登录状态。虽如此,有的用户还是习惯于直接关闭画面,或者浏览器,这个时候原来用axios向后台发送登出请求的方式就行不通了。于是乎,只能换别的招了,残念!最终调查总结出两种方法,亲测有效,就做此记录。
1、jquery
引入jQuery,使用ajax发送同步请求,代码如下:
[code]window.onbeforeunload = () => { $.ajax({ type: "POST", data: { name: "hyuga hinata" }, url: "http://localhost:8080/closeTab", async: false }); };
其中onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。
2、原生js
如非必要,可以不用引入jquery,使用原生js发送请求也是可以的,代码如下:
[code]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不能满足需求。
好了,做好记录!
相关文章推荐
- F5当刷新页面,出现“要再次显示此页,web该浏览器,你曾经有过发送消息再次提交...点击重试",如何防止此对话框解决方案的出现,
- 关于ajax局部刷新,从数据库实时更新数据到页面(一般是下订单成功后发送消息到后台)
- 关于showmodaldialog 打开新窗口后提交表单操作时,避免弹出新窗口和避免从后台获取“新数据”后不能刷新当前模态页面的解决方案
- Struts2:禁止用户直接向指定页面发送请求
- 关于HTML发送AJAX请求一直重复刷新页面问题
- saucer(思归)解决的关于:页面A.aspx 动态载入用户自定义控件a.ascx,但a.ascx中的按钮提交后,不执行按钮的事件,而是直接刷新页面
- 偷来的js 判断用户关闭浏览器或者刷新页面 ie有效
- Jquery 浏览器页面窗口刷新或关闭时,执行后台方法(兼容各主流浏览器)
- JSP(7)关于刷新持续发送请求的处理
- ASP.NET后台代码方式识别页面“按钮点击”和浏览器F5“刷新”事件
- 捕获浏览器关闭、刷新事件,在窗体关闭时从全局对象里移除当前用户
- 关于向后台请求数据(get请求,无参数传递),返回html代码(实际需要返回的是json数据)的解决方案
- 在微信浏览器中 location.reload() 不刷新解决方案(直接调用方法)
- JS判断用户是否有权限进入当前页面,没有直接关闭(解决IE7以上版本提示问题)
- 关于springMVC和传统servlet框架从jsp页面向后台请求url问题
- 解决浏览器 Provisional headers are shown 无法向后台发送请求问题
- 在用户离开页面(刷新、后退、关闭等)时提示信息.txt
- ASP.NET后台代码方式识别页面“按钮点击”和浏览器F5“刷新”事件
- java在线支付---06,07,08_在线支付_编写将数据提交给易宝支付的JSP页面,集成和测试向易宝发送支付请求,实现浏览器自动向易宝发送支付请求
- ASP.NET后台代码方式识别页面“按钮点击”和浏览器F5“刷新”事件