Heim > Web-Frontend > js-Tutorial > Hauptteil

Jquery 实现表单提交按钮变灰,防止多次点击提交重复数据

PHPz
Freigeben: 2018-10-10 16:27:32
nach vorne
1571 Leute haben es durchsucht

表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾。jQuery很简单的就可以实现对表单提交按钮控制,下面就是相关的例子和代码。

<form action="${pageContext.servletContext.contextPath}/XXX/###" method="post" id="messageForm">
	姓名:<input name = "name" type="text" />
             <button type="button" id="submit">提交申请</button>
</form>
<script>
$("#submit").click(function(){

    $(this).attr("disabled","true"); //设置变灰按钮
    $("#messageForm").submit();//提交表单
    setTimeout("$('#submit').removeAttr('disabled')",3000); //设置三秒后提交按钮 显示
     
})
</scritp></span>

</span>
Nach dem Login kopieren

附:其他的实现方法,也使用了js

  第一种:

<form name=fm method="POST" action="/">
<p>按钮变灰</p>
    name: <input type="text" name="name"/>
     <input type="button" value="提交" onclick="javascript:{this.disabled=true;document.fm.submit();}">

</form>
Nach dem Login kopieren

 第二种:

<form name=fm method="POST" action="/" >
  <input type="submit" name="Submit" value="提交" id="submitId" onclick="submit();">
</form>
<script language="javascript">
 function submit()
 {
 var submitId=document.getElementById('submitId');
 submitId.disabled=true;
 document.fm.submit();
 setTimeout("submitId.disabled=false;",3000); //代码核心在这里,3秒还原按钮代码
}
</script>
Nach dem Login kopieren

前后代码进行控制,后台代码也要进行控制,这样子就可以确保万无一失了!

后台代码控制表单提交有一个好的办法就是使用session, 具体可以参考下面这篇博文:

其实后台控制表单重复提交的原理:

(1)在表单提交页面生成一个唯一的token;token可以保存在session中。(若使用了缓存,也可以保存在缓存中)

(2)提交的时候验证,后台首先验证token,验证通过,才可以进行提交操作;

(3)当表单数据提交成功(保存到数据库-持久化),然后删除session(缓存)中对应的token。

更多相关教程请访问 JavaScript视频教程

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage