前端在向后端进行数据提交的时候,通常会需要在第一次提交返回前,阻止用户在快速点击发送二次请求,即防止重复提交,最简单的方法是使用标志参数或者类元素控制,但缺点是,每个控制重复提交的地方都需要加上这个逻辑,重复性太强,且控制逻辑不统一。
目前前端使用的是http协议,所以提交方式为两种
<李>异步提交,使用jQuery.ajax()
<李>形式表单同步提交李
下面这篇文章将给大家详细介绍关于这两种方法实现的方法示例,下面话不多说了,来随着小编一起看看详细的介绍吧
通过jQuery提供的ajaxPrefilter方法,将在请求提交之前进行过滤,仅保留第一次请求,后续的请求中止阻止掉,具体实现代码如下
/* *
* _pendingRequests={
*“http: xxx.xxxx.do”:['域=P2P ', ' xxxx=aaa '],
*“http: xxx.yyyy.do”:['域=P3P ', ' xxxx=bbb ']
*}
*该对象的关键是请求的url,价值是由请求参数转化成的字符串数组
*/var _pendingRequests={};
美元。ajaxPrefilter(功能(选项、originalOptions jqXHR) {
var p_item={//保存请求请求的url
关键:options.url,
指数:0
}，
dataArray=选项。数据& # 63;options.data.split(”和“):[];
compareData=https://www.yisu.com/zixun/function (beforD afterD) {//当url相同时,以此比较保存的参数对象,若参数对象相同,则返回假,若第一个就相同,则跳出循环//反之说明当前参数对象列表中没有与将要提交的参数相同,则可看为不同的请求,返回真,允许发起请求
var=false结果;
我(var=0;
jquery。ajaxprefilter官方文档
表单的处理就稍微要麻烦点,但大致思路和异步的相同,等待第一次请求返回的同时,阻止后续触发的请求发送
首先基于jquery扩展了一个自定义的方法,如下
.fn美元。preventDoubleSubmission=function () {
(美元)。(“提交”功能(e) {
var=$美元形式(这);//form.data美元(“提交”)通过该变量判断请求的状态
如果(form.data美元('提交')===true) {//阻止请求
e.preventDefault ();
其他}{
美元的形式。数据(“提交”,真正的);
如果(form.attr美元(“目标”)===降取?{
setTimeout(函数(){
美元的形式。数据(“提交”,假);
},800);
}
}
}）;
返回;
};
当表单初次提交时,通过,<代码> jQuery.data() 设置一个标志位,当表单重复提交时,判断设置的标志位,若是提交状态,将阻止表单的提交事件。当<代码>的形式。目标=平等>
为了方便对全站的表单提交统一处理,可对需要放重复提交的表单添加一个类preventDouble,在页面渲染后,统一加上事件监听
