当前位置:首页 » 网页前端 » 前端连续点击如何防止重复提交
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端连续点击如何防止重复提交

发布时间: 2022-04-28 03:24:38

‘壹’ JSP中如何防用户重复提交

onclick= 将时间放在一个隐藏文本框里面,后台获取放在session里面,如果与上一次的相同则为重复提交 是24小时内呢 还是就是这一天呢。看你的这个需求,session也不好搞,session有生命周期的(虽然服务器可以手动设置时间),但是如果服务器中断重启,session就没有了。还是保存数据库吧,给这个用户添加个字段(更新时间),登录后判断当前日期是否跟更新日期一样,一样说明已经登录过了,当前日期大于更新日期,说明今天还没登录,然后修改更新日期为当天日期

‘贰’ .net core savechanges 网络不好情况下,如何防止用户连击重复提交数据

1、前端提交处理显示遮罩层,如果后台无返回则显示提交中,直到后台返回成功才进行遮罩层的取消

2、后台可以进行唯一标识符的判定比如名称是否一样等等来进行重复提交数据的更新或者丢企

‘叁’ ASP.NET如何防止页面重复提交

用户点击提交按钮后,通过JavaScript脚本将提交按钮disable掉,同时显示动画提示用户系统正在处理,并触发服务器端事件。具体是通过在Page_Load事件中添加如下代码实现的:

//sb保存的是JavaScript脚本代码,点击提交按钮时执行该脚本
StringBuilder sb = new StringBuilder();
//保证验证函数的执行
sb.Append("if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};");
//点击提交按钮后设置Button的disable属性防止用户再次点击,注意这里的this是JavaScript代码
sb.Append("this.disabled = true;");
//用__doPostBack来提交,保证按钮的服务器端click事件执行
sb.Append(this.ClientScript.GetPostBackEventReference(this.btnSubmit, ""));
sb.Append(";");
//SetUIStyle()是JavaScript函数,点击提交按钮后执行,如可以显示动画效果提示后台处理进度
//注意SetUIStyle()定义在aspx页面中
sb.Append("SetUIStyle();");
//给提交按钮增加OnClick属性
this.btnSubmit.Attributes.Add("onclick", sb.ToString());

‘肆’ 求JS 大神指导,页面的防止重复点击事件(具体见补充)

  • 可以添加标记,第一次点击后变为false,每次点击判断这个标记是true才执行。

  • 如果是按钮防止重复点击,可以再按钮点击后,给按钮添加disabled属性。

‘伍’ jquery 如何防止重复提交

//如果是input就直接在提交过程中将按钮disable掉,如果是a可以用下面这种,当然解决根本问题还是后端验证重复提交的好
varsub=false;
$(btn).click(function(){
if(sub===true){
return;
}
sub=true;
$.post(url,function(){
//TODO
sub=false;
})
});

‘陆’ JS WEB前端开发如何防止重复提交的实现方

定义一个变量。
var flag= 0;
如果flag=0 就让提交
在提交后,数据没有返回来前,将flag=1
数据返回来后再设置成0
这样就能防止重复提交。非常有效。

‘柒’ 安卓开发 怎么避免重复提交请求

web前端数据请求或者表单提交往往通过对dom的点击事件来操作,但是往往因为认为点击过快(少年手速挺快的嘛),或者因为响应等待使得用户误人为没操作而重复很多次点击,造成表单数据的连续重复提交,造成用户体检的不好,甚至影响到整个系统的安全性。而前端的防治重复提交至少很有效的防治了人为正常操作下的很多不必要麻烦。下面就来讲讲如何有效避免前端的表单重复提交 表单提交有以下几种方式: <form name=”form” method=”post” action=”#"> <input type=”submit” name=”submit” value=”提交"> </form> 另外,还有一种常用的方法是使用图片: 代码如下: <form name=”form” method=”post” action=”# "> <input type=”image” name=”submit” src=”btnSubmit.jpg”> </form> 第三种是使用链接来提交表单,用到了javascript的DOM模型: 代码如下: <form name=”form” method=”post” action=”#”> <a href=”javascript:form.submit();”>提交</a> </form> 实际上这一种是通过js 进行提交。可以理解成 $("form").find("a").click(function(){ $("form").submit(); }); 第一种和第二种可以用js来: $("input[type='submit']").click(function(){ $("form").submit(); }); $("input[name='submit']").click(function(){ $("form").submit(); }); 总之,都是对form进行提交,当然还有出了表单提交还有些请求也要防治重复,比如响应某个事件的ajax请求(提交数据) $.ajax({ url: url, type: "post", data: data, success: function (data) { callback; } }); 那么前面这些提交和请求在网络和性能因素上导致不能及时网络响应并且在事件多次响应时造成的重复,除非在提交响应完成前的点击(触发事件)视为无效,等当前响应完了再去响应下一个请求 如果是表单按钮我们可以这样在点击后将按钮disabled掉 $("input[type='submit']").click(function(){ $(this).attr("disabled",true); $("form").submit(); }); 按道理来说,将点击后将按钮disabled设为true时按钮就不能点击了那么第二次以后点击就无效了,但这样做你会发现同时第一次点击的表单也无法正常提交了(好像是h5的标准后才不行的,无论怎样h5标准的浏览器我试了试都不行),看来是disabled影响了表单的提交,那么先提交后disabled看行不行 $("input[type='submit']").click(function(){ $("form").submit(); $(this).attr("disabled",true); }); 实验结果 ,这样也不行,我们不能猜想submit()回调在click函数最后执行并且.submit()函数内部应该对disabel做了判断(假设这是浏览器内部机制原理),反正在当前这个交互周期里disabled了就不能submit 那么我们可以抛开disabled用代码逻辑来防治重复 $("input[type='submit']").click(function(){ if(!$(this)[0].repeat){ $(this)[0].repeat=true; $("form").submit(); } }); 在当前点击的按钮如果没有repeat的话就进入提交并且设置个值为true的repeat属性,当第二次进来的时候发现有这个属性就不提交,看似这样的逻辑会防治重复提交了,但是事实永远都是残酷的! 是的,当点击过快的时候还是会重复提交,这是因为,如果click里没执行submit的时候html默认的type=submit 的input点击操作会提交表单,举个完整的例子 <form name=”form” method=”post” action=”#"> <input type=”submit” name=”submit” value=”提交"> </form> <form name=”form” method=”post” action=”#"> <input type=”submit” name=”submit” value=”提交"> </form> $("input[type='submit']").click(function(){ console.log("here is click too!"); }); <form name=”form” method=”post” action=”#"> <div>提交</div> </form> $("form").find("div").click(function(){ $("form").submit(); }); 这三个代码都是一个效果提交表单,但是!!!!!!!!!!我们发现阻止表单提交的不就是在当前交互周期(一次点击-》响应-》回调)里,将submit按钮disabled掉吗,好的,少年上代码 $("form").find("div").click(function(){ if(!$(this)[0].repeat){ $(this)[0].repeat=true; $(this).closest("form").submit(); }else{ $(this).attr("disabled",true); } }); 看到没有,第二次点击的时候就disabeld掉了,所以只有第一次成功,第二次的就不会提交了! 当然,如果是其他dom元素防治重复点击那就更简单了 $("div").click(function(){ if(!!$(this)[0].isRepeat){ return; } $(this)[0].isRepeat=1; $.ajax({ url: url, type: "post", data: data, success: function (data) { $(this)[0].isRepeat=0; callback; } }); }); 因为submit()会刷新试图,而ajax不会,所以在回调后需要把判断重复的那个属性赋值为false 这是不是就更简单?我想你会这样认为的! 以上所述是小编给大家介绍的JS WEB 前端开发中防治重复提交的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

‘捌’ jquery ajax如何防止多次提交

部分重要代码:
$.ajax({
type:'post',
url:'LibraryBooks_data.php',
data:params,
dataType: 'json',
async:false, //这是重要的一步,防止重复提交的
success: function (a)
{
if(a.action=='ture'){
$.success('操作成功!');
}
}
});

默认设置下,所有请求均为async异步请求。
如果需要发送同步请求,请将此async选项设置为 false。

注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此async选项设置为 false。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

‘玖’ JS Ajax请求如何防止重复提交

好长时间没写js代码了刚好遇到这样的问题。我们系统多数表单没有做防止重复提交的。
由于不想在后端这边处理,因为假如由后端处理的话,就需要在页面加载的时候给出一次性的token值,加大了开发的工作量不说,还容易忘记做这个,同时,ajax也不好处理,需要提交失败的话同时返回新的token值。
所以我想在,js这边动手。其实以前和前端提过,久久不见动静,就只好弄块砖丢出去了。思路是,覆盖掉$.ajax,在这里面处理掉防止重复提交的问题,而前端的业务开发不受影响,不改代码,无感知。
我想架构的目的之一,就在于简化业务开发,屏蔽掉业务无关的细节,让一线开发安心写业务吧。
代码如下:
/**
*
Created
by
xiayongsheng
on
2016/6/12.
*/
;(function($){
var
ajax
=
$.ajax;
//
用于存储ajax的请求
var
ajaxState
=
{};
var
kinhomAjax
=
function
()
{
var
args
=
Array.prototype.slice.call(arguments,
0);
//
url
data
一致,
//
应该将
url取出,data按键值排序,后将值拼接在一起,进行sha1得到的值作为指纹
//
累先用
url作为指纹吧
var
hash
=
typeof
args[0]
===
'string'?args[0]:args[0].url;
if
(typeof
ajaxState[hash]
!==
'undefined')
{
if
(ajaxState[hash]
>
3)
{
alert('请不要重复提交,请求正在处理中');
}
++ajaxState[hash];
return
$.Deferred();
}
ajaxState[hash]
=
1;
var
def
=
ajax.apply($,args);
def.done(function
()
{
delete
ajaxState[hash];
});
return
def;
};
$.ajax
=
kinhomAjax;
})(jQuery);
以上所述是小编给大家介绍的JS
Ajax请求如何防止重复提交的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

‘拾’ 在java中怎么防止页面重复提交

1.新建两个文件
index.jsp -- 表单页面
success.jsp -- 结果提示页面

2
2.代码分别如下:

3
3.新建TokenServlet,代码如下

4
4.运行index.jsp,输入用户名,点击提交

5
5.正常跳转结果页面

6
6.但当我在这个页面点击刷新的时候,出现如下提示

7
7.点击重试,发现又一次调用了servlet,这就是一个重复提交

8
8.多刷新几次,注意看URL地址,现在仍然是servlet

9
9.以前说重定向可以解决表单重复提交的问题,我们修改Servlet代码如下

10.再次测试,发现重定向到了success.jsp ,再点击刷新的话也不会出现重复提交了

11.那问题解决了么?再看,当我点击浏览器中的返回,然后再点击提交,如此反复,仍然在重复调用Servlet,这也是重复提交

12.现在修改Index.jsp

13.修改servlet代码

14.新建token文件,代码如下

15.在浏览器中测试(注,这里如果再使用Eclipse自带浏览器的话,会出现缓存问题,所以使用正常的浏览器火狐或者IE)

16.hidden中的token 和session中的token是相同的

17.当点击浏览器中的后退按钮,再次进行操作,发现不能重复提交

18.这是因为session中的token已经被移除掉了

19.而返回后刷新页面,相当于新开一个index.jsp 重新获取token 赋值给session,这时可以正常提交了