Ajax响应前和完成事件 / beforeSend complete / 判断ajax是否执行完毕

最新推荐文章于 2025-06-19 17:49:07 发布

原创最新推荐文章于 2025-06-19 17:49:07 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#beforeSend #complete #Ajax响应前和完成事件

前端同时被 2 个专栏收录

39 篇文章

订阅专栏

数据交互

5 篇文章

订阅专栏

在数据交互过程中，为避免用户因响应延迟而重复点击按钮导致的数据重复问题，本文介绍了一种利用Ajax的beforeSend和complete方法显示和隐藏加载提示的解决方案。此方法通过在请求前显示加载图标，在请求完成后关闭，有效防止了重复提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述：进行数据交互时如果交互时间长，响应慢的话，用户点击提交按钮误认为自己没有操作成功，就会重复点击按钮，造成重复数据。解决的办法是在用ajax请求时，在交互结束之前出现一个转动的loading小图标或者“内容加载中..”的弹框，用来告知用户正在请求数据，在交互结束后这个弹框就会消失。

解决办法：$.ajax的方法beforeSend 和 complete 。beforeSend，用于在向服务器发送请求前添加一些处理函数，complete ，用于服务器完成响应后执行的函数。

                                    $.ajax({
						type:"post",
						url:"xxx",
						data:dataParams,
						dataType:"json",
						async:false,
						beforeSend: function () {
					        // 提交数据前显示loading...
					       
					        },
						success:function(res){
                                                //数据提交成功
						
							
						},
						complete: function () {
					       //响应完成后关闭loading...的显示
					        },
						error:function(){
						
						}
					});