Jquery는 여러 번의 클릭으로 중복 데이터가 제출되는 것을 방지하기 위해 양식 제출 버튼을 회색으로 만듭니다.

양식을 제출할 때 제출 버튼을 제어해야 하며 여러 번 클릭하여 데이터를 반복적으로 제출할 수 없습니다. 그렇지 않으면 시스템에 중복된 데이터가 생겨 시스템에 데이터 쓰레기가 발생하게 됩니다. 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>

첨부: 다른 구현 방법도 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>

두번째 유형 :

<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>

앞뒤코드도 조절해야하고, 배경코드도 조절해야하고, 그래서 그것은 완벽하게 보장됩니다!

백그라운드 코드로 양식 제출을 제어하는 ​​좋은 방법은 세션을 사용하는 것입니다. 자세한 내용은 다음 블로그 게시물을 참조하세요.

실제로 반복 양식의 백그라운드 제어 원리는 다음과 같습니다. 제출:

( 1) 양식 제출 페이지에서 고유 토큰을 생성합니다. 토큰은 세션에 저장될 수 있습니다. (캐시를 사용하면 캐시에 저장할 수도 있습니다)

(2) 검증 제출 시 백그라운드에서 먼저 토큰을 검증하고 검증을 통과한 후에만 제출 작업을 수행할 수 있습니다. 🎜>

(3) 양식 데이터가 성공적으로 제출되면(데이터베이스에 저장 - 지속성) 세션(캐시)의 해당 토큰이 삭제됩니다.

더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼
을 방문하세요.