js在页面刷新或关闭之前对后台发送请求

最新推荐文章于 2024-09-22 18:14:12 发布

Amy是个小猪头

最新推荐文章于 2024-09-22 18:14:12 发布

阅读量1.1k

点赞数 1

分类专栏： js 前端文章标签： ajax javascript

本文链接：https://blog.csdn.net/weixin_52279913/article/details/120019809

版权

本文介绍如何利用JavaScript的beforeunload事件来在页面刷新或关闭之前向后台发送请求，以满足记录用户停留时间的项目需求。在实践中发现，将AJAX请求设置为同步可能导致请求无法发出，这是一个需要注意的问题。

摘要由CSDN通过智能技术生成

最近项目需求：记录用户在当前页面停留的时间

这里用到了window的自带api：beforeunload

window.addEventListener('beforeunload', function(e) {
   
        let a = $.ajax({
   
          type:'get',

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Amy是个小猪头

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

利用js实现页面关闭时发送http请求

sunlylorn的专栏

07-13

2万+

一、背景假设有一个图片浏览的网页，每日pv量大概在80,000,000左右，uv量在3,000,000左右，现需要统计每张图片的pv量。二、方案方案1 每浏览一张图片，发送图片id和浏览数量到后台，并记录到数据库（可能会涉及到缓存机制，比如Memcache）方案2 在页面中用js

Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求

10-14

主要介绍了Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

参与评论您还未登录，请先登录后发表或查看评论

JavaScript当页面关闭时向后台发送请求

weixin_30674525的博客

01-22

1100

今天做项目时遇上一个需求，当浏览器或页面关闭时将数据存储到数据库内。实现思想是采用js监测onunload然后发送请求。结果失败，刷新可以发送但是关闭并不能，整了一整天并没有解决，最后找到了解决办法。先贴个能实现功能的方法： 1 function saveStatus(){ 2 /*结束时保存设备状态*/ 3 window.onbeforeunload=func...

Web Beacon 刷新/关闭页面之前发送请求

weixin_33717298的博客

02-25

990

背景：有一个任务非常耗时会消耗后台大量算力，所以在退出页面的时候，要求前端这边发送一个请求来杀死任务。一开始以为这个需求非常简单，就是在进入其他路由前，发送一下请求，杀死一下任务就好了。然而现实狠狠的打了我的脸，因为退出页面的场景不止切换路由~ 退出页面场景：还在本网站，跳到其他路由刷新页面/关闭页面也需要发送请求来杀死任务还在本网站，跳到其他路由这个比较简单，在Vue中可以通过...

前端vue+axios实现关闭/刷新页面前向后台接口发送请求

树上骑个猴的博客

06-17

4205

created() { window.addEventListener('beforeunload', e => { this.updateHandler(e) }) } destroyed() { window.removeEventListener('beforeunload', e => { this.updateHandler(e) }) }, beforeDestroy() { this.canc..

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

小小白的博客

11-08

8642

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

Vue js监听区分窗口关闭事件和刷新事件，并在窗口关闭前发送请求，退出登陆

@必意玲

09-08

4276

区分窗口关闭和刷新事件火狐浏览器兼容关闭发请求，退出登陆操作（使用原生发同步请求，使用axios发异步会出现时行时不行问题） <template> <div id="app"> <router-view /> </div> </template> <script> export default { ...

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

11-25

在本例中，我们将讨论如何使用JavaScript（JS）实现一个倒计时功能，该功能能够在页面刷新或关闭后恢复到正确的剩余时间，主要依赖于jQuery库和jQuery Cookie插件。首先，我们引入必要的外部资源，如jQuery库和...

js短信验证码倒计时（页面刷新无效）

07-25

本文将深入探讨如何实现一个js短信验证码倒计时功能，同时确保在页面刷新后倒计时状态能够保持。首先，我们需要理解验证码发送和倒计时的基本逻辑。当用户点击获取验证码按钮时，前端会向后端发送请求，请求发送...

vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求

热门推荐

weixin_42682011的博客

08-22

1万+

vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求1.需求背景：2.需求分析：3.实现方式：4.实现方式解析：1）浏览器页面事件基础2）在mounted监听beforeunload和unload事件5.存在的问题/风险点：1）为了避免意外弹出窗口，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，直接执行关闭/刷新操作是不会弹出提示框的；2）浏览器提示框的样式和内容是默认的，不能更改；3）在关闭/刷新页面前发送的请求，如果使用axios方式，由于是异步的，在执行

js在页面刷新或关闭浏览器之前执行方法

ydZ157的博客

02-11

1930

window.onbeforeunload = function() { //dosomething... }

如何在web页面关闭或刷新之前，发送Ajax到服务端

weixin_34100227的博客

04-19

1393

最近在做实时视频这块的封装，需要客户端Ajax实时上报状态给服务端，以确认用户的当前的通话状态。这个时候，涉及到当用户离开客户端时候（关闭浏览器），发送离线状态给服务器。一、监听浏览器关闭事件浏览器关闭事件会有两个，unload 和 **beforunload，两者是有区别的，从字面上来看，beforunload的调用是在 unload之前。 1、beforeunload在用户即将离开页面时触...

Navigator.sendBeacon 无阻塞发送统计数据

青天诀的专栏

10-28

8049

业务场景当用户关闭浏览器、刷新浏览器或者跳转其他页面时，向服务器发送一些统计数据。常规方案 1. 直接发送 xhr 请求我们会优先想到监听页面的unload或者beforeunload事件，在事件回调里使用XMLHttpRequest发送异步请求。但是由于是xhr请求是异步发送，很可能在它即将发送的时候，页面已经卸载了，从而导致发送取消或者发送失败。异步请求响应返回后，由于页面和相关资...

关闭页面时向后台发送消息

前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下

07-27

772

不管是刷新页面还是关闭页面，后台都能接收到前端发送过来的请求，完美实现需求。当用户代理成功把数据加入传输队列

后台利用JS刷新页面（网站）

道法自然

03-06

6321

1.在后台中的显示添加或修改后的提示信息（提示之后刷新当前页） ShowMsgHelper.AlertMsg("操作成功！"); 2.提示信息的原函数 top.main.windowload();//javascript中的刷新页面代码 public static void AlertMsg(string message) { ShowMsg

js刷新页面的方式

IT_dawdler的博客

02-28

335

个人知道的刷新方式为以下三种：1.window.location.replace("url")；2.window.location.href="url";3.window.location.reload();三张方式都会刷新页面。前两种会提交数据，第一种会在提交数据时提示是否提交，它可以提交get和post两种方式提交的数据；第二种不会提示是否提交数据，而且只能提交get方式提交的数据；第三种为强...

web项目实现用户退出网页前向后端发送请求

weixin_42613910的博客

02-05

631

在工作中有遇到这样一个需求，用户进入一个页面，要编辑页面内容前先点击“编辑”按钮，锁定编辑权限（则当前其他人不可编辑），编辑完后要释放权限得点下“结束编辑”释放权限。那么问题来了，且不说每次关闭页面前都要点“结束编辑”按钮比较麻烦，要是用户不小心退出了页面，那编辑权限就一直被占用。在退出网页前（关闭浏览器、关闭/刷新页面）自动向后端发送一个结束编辑的请求。这个方法常用于在用户关闭页面或浏览器之前，发送一些需要保存的数据。是一个 Web API 方法，用于向服务器发送非阻塞性的 HTTP 请求。

详解Ajax与axios的区别