JavaScript实现点击按钮后变灰避免多次重复提交,
分类:计算机网络

<script type="text/javascript" language="javascript"> 
var wait = 60; 
function change() { 
$o = $("#J_refresh_checkcode"); 
if(wait == 0) { 
$o.removeAttr("disabled"); 
$o.html("看不清?换一张"); 
wait = 60; 
} else { 
$o.attr("disabled", true); 
$o.attr("font-color", "gray"); 
$o.html(wait + "秒后可重新获取"); 
wait--; 
if(wait == 59) { 
var imgNode = document.getElementById("vimg"); 
imgNode.src = "../../AjaxServer/CheckCodePic.ashx?t=" + (new Date()).valueOf(); // 这里加个时间的参数是为了防止浏览器缓存的问题 
$("#J_checkcode_tip").addClass("hide"); 
$("#J_checkcode_tip>div").html(""); 
$("#<%=hidPicMessage.ClientID%>").val(""); 
} 
setTimeout(function() { 
change() 
}, 
1000) 
} 
}</script>
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>防止重复表单提交</title> 
<style> 
#refresh{ 
display: none; 
width:200px; 
height:20px; 
background-color: #ff0; 

} 

</style> 

<script> 
var inprocess = false; 
window.onload = function(){ 

document.forms["picker"].onsubmit = validateSubmit; 
document.getElementById("refresh").onclick = startOver; 
} 
function validateSubmit () { 
// 防止重复的表单提交 
if (inprocess) return; 
inprocess = true; 
console.log(inprocess); 
document.getElementById("submitbutton").disabled = true; 

document.getElementById("refresh").style.display = "block"; 
document.getElementById("message").innerHTML = "<p>正在processing,稍等</p>"; 
return false; 
} 
function startOver(){ 
inprocess = false; 
document.getElementById("submitbutton").disabled = false; 
document.getElementById("message").innerHTML = ""; 
document.getElementById("refresh").style.display = "none"; 

} 
</script> 
</head> 

<body> 

<form id="picker" method="post" action=""> 
group1:<input type="radio" name="group1" value="one" /> 
group2:<input type="radio" name="group1" value="two" /> 
group3:<input type="radio" name="group1" value="three" /><br /><br /> 
Input 1: <input type="text" id="intext" /> 
Input 2: <input type="text" id="intext2" /> 
Input 3: <input type="text" id="intext3" /> 
<input type="submit" id="submitbutton" value="send form" /> 
</form> 
<div id="refresh"> 
<p>单击我</p> 
</div> 
<div id="message"></div> 
</body> 
</html> 

好长时间没写js代码了刚好遇到这样的问题。我们系统多数表单没有做防止重复提交的。

注册的时候需要发送验证激活帐号的邮件,为了避免邮件的多次重复发送,所以可以在点击了发送后,设置button要过一段时间才能继续点击。下面是一个简单的例子:

则 html如下:

您可能感兴趣的文章:

  • js防止表单重复提交的两种方法
  • javascript下阻止表单重复提交、防刷新、防后退
  • js防止表单重复提交实现代码
  • js控制再次点击按钮之间的间隔时间可防止重复提交
  • JSP防止网页刷新重复提交数据的几种方法
  • JavaScript实现点击按钮后变灰避免多次重复提交
  • JSP刷新页面表单重复提交问题解决办法分享
  • JS Ajax请求如何防止重复提交
  • jsp 重复提交问题
  • 前端防止用户重复提交js实现示例代码

由于不想在后端这边处理,因为假如由后端处理的话,就需要在页面加载的时候给出一次性的token值,加大了开发的工作量不说,还容易忘记做这个,同时,ajax也不好处理,需要提交失败的话同时返回新的token值。

复制代码 代码如下:

<div class="kv_item clear"> 
验证码 
<input name="checkCode" class="i_textshort fl" id="J_checkcode_input" onmousedown="ClearCodeMessage()" type="text" maxlength="6" autocomplete="off" onblur="CheckCode()" /> 
<img src="../../AjaxServer/CheckCodePic.ashx" height="28" id="vimg" alt="美高梅网址 1" style="float:left;margin:-1px 0 0 3px"/> 
<a id="J_refresh_checkcode" onclick="change()">看不清,换一张</a> 
<div class="msg msg-inline msg-weak hide" id="J_checkcode_tip"> 
<div class="msg-default msg-error"> 
<i class="msg-icon"></i> 
<div class="msg-content"> 
</div> 
</div> 
</div> 
</div>

所以我想在,js这边动手。其实以前和前端提过,久久不见动静,就只好弄块砖丢出去了。思路是,覆盖掉$.ajax,在这里面处理掉防止重复提交的问题,而前端的业务开发不受影响,不改代码,无感知。

<html>
<head>
<title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title>
</head>
<body>
<input type="button" id="btn" value="免费获取验证码" />
<script type="text/javascript">
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="免费获取验证码";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value=wait+"秒后可以重新发送";
wait--;
setTimeout(function() {
time(o)
},
1000)
}
}
document.getElementById("btn").onclick=function(){time(this);}
</script>
</body>
</html>

您可能感兴趣的文章:

  • js防止表单重复提交的两种方法
  • javascript下阻止表单重复提交、防刷新、防后退
  • js防止表单重复提交实现代码
  • JSP防止网页刷新重复提交数据的几种方法
  • JavaScript实现点击按钮后变灰避免多次重复提交
  • JSP刷新页面表单重复提交问题解决办法分享
  • JS Ajax请求如何防止重复提交
  • jsp 重复提交问题
  • 一个JavaScript防止表单重复提交的实例
  • 前端防止用户重复提交js实现示例代码

我想架构的目的之一,就在于简化业务开发,屏蔽掉业务无关的细节,让一线开发安心写业务吧。

您可能感兴趣的文章:

  • js防止表单重复提交的两种方法
  • javascript下阻止表单重复提交、防刷新、防后退
  • js防止表单重复提交实现代码
  • js控制再次点击按钮之间的间隔时间可防止重复提交
  • JSP防止网页刷新重复提交数据的几种方法
  • JSP刷新页面表单重复提交问题解决办法分享
  • JS Ajax请求如何防止重复提交
  • jsp 重复提交问题
  • 一个JavaScript防止表单重复提交的实例
  • 前端防止用户重复提交js实现示例代码

代码如下:

/**
* 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请求如何防止重复提交的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • js防止表单重复提交的两种方法
  • javascript下阻止表单重复提交、防刷新、防后退
  • js防止表单重复提交实现代码
  • js控制再次点击按钮之间的间隔时间可防止重复提交
  • JSP防止网页刷新重复提交数据的几种方法
  • JavaScript实现点击按钮后变灰避免多次重复提交
  • JSP刷新页面表单重复提交问题解决办法分享
  • jsp 重复提交问题
  • 一个JavaScript防止表单重复提交的实例
  • 前端防止用户重复提交js实现示例代码

本文由美高梅网址发布于计算机网络,转载请注明出处:JavaScript实现点击按钮后变灰避免多次重复提交,

上一篇:js中字符串编码函数escape美高梅网址,深入分析 下一篇:print打印指定div指定网页指定区域的方法,web页面
猜你喜欢
热门排行
精彩图文