防止表单的多次提交


<%@ page contentType="text/html; charset=gb2312" %>
<HTML><TITLE>提交页面</TITLE>
<%
  //设置标志变量SubmitFlag值Test.jsp
  session.putValue("SubmitFlag","ServerTest.jsp");
 
%>

<BODY BGCOLOR="#FFFFFF">
 <form name="form_client"  action=Submit.jsp  />  
   <input type="checkbox" name ="check_1" checked=true />创世纪计算机资源网
   <input type="submit" name="submitok"/>
 </form>
</BODY>
</HTML>


Submit.jsp  文件:

<%@ page contentType="text/html; charset=gb2312" %>
<HTML><TITLE>服务器端程序</TITLE>

<%
  String PageFlag;
  PageFlag=(String) session.getValue("SubmitFlag");
  if (PageFlag=="Over")
     {out.println("不能重复提交页面!"); }
   else
     {
      //设置标志变量SubmitFlag值为Over,表示已经提交
      session.putValue("SubmitFlag","Over");
      out.println("正常处理...请等待!!!");
      }
 
%>

</HTML>

 
 

在JavaScript中防止表单多次提交通常会结合HTML和一些客户端脚本(如jQuery、vanilla JS)来实现,以下是几种常见的方式: 1. **利用`<button>`元素的`disabled`属性**: 当表单正在处理(比如已经发送了Ajax请求)时,你可以禁用提交按钮,如下所示: ```html <form id="myForm"> <!-- ... --> <button type="submit" id="submitBtn" onclick="preventSubmit()">提交</button> </form> <script> function preventSubmit() { event.preventDefault(); // 阻止默认提交 if (/*表单正在处理*/ || /*已提交标志*/){ alert('请稍等,表单正在处理中...'); } else { submitForm(); } } function submitForm() { // 发起Ajax请求 document.getElementById('myForm').submit(); // 可能需要设置一个标志或改变按钮状态 document.getElementById('submitBtn').disabled = true; } </script> ``` 2. **利用`event.stopPropagation()`**: 只阻止当前事件的传播,而不影响父级元素的事件处理,适用于嵌套的DOM结构: ```javascript document.getElementById('myForm').addEventListener('submit', function(event) { event.stopPropagation(); // 阻止表单的直接提交 // 其他处理逻辑 }); ``` 3. **利用`data-*`属性存储状态**: 在HTML中添加隐藏字段,并在JavaScript中读取该值来判断表单是否已被提交: ```html <form id="myForm"> <!-- ... --> <input type="hidden" name="submitted" data-default="false" /> <button type="submit">提交</button> </form> <script> document.getElementById('myForm').addEventListener('submit', function(e) { if (!this.querySelector('[name=submitted]').dataset.default) { this.querySelector('[name=submitted]').value = 'true'; // 提交表单并阻止 e.preventDefault(); } }); </script> ``` 以上每种方法都有其适用场景,根据实际项目需求选择合适的方法。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值