做网站做系统/免费网站seo排名优化
表单重复提交什么意思？
表单重复提交是重复多次的提交同一表单的意思。
在平时开发中，如果网速比较慢的情况下，或者远程有延迟，用户提交表单后，发现服务器半天都没有响应，那么用户可能会以为是自己没有提交表单，就会再点击提交按钮重复提交表单，这样会出现表单的重复提交，造成向服务器发送两次请求，所以我们在开发中必须防止表单。
表单重复提交的情况：
1、第一次单击提交之后，在没有提交成功情况下，又单击提交按钮。
2、提交完表单之后，刷新网页。
3、用户提交表单后，点击浏览器的【后退】按钮回退到表单页面后进行再次提交。
表单重复提交问题的三种解决思路
第一：如果是点击submit类型的按钮提交表单，就要先看是否是表单的默认提交事件，如果是，禁用默认提交事件(event.preventDefault();)或者改用button类型按钮提交$('#submit').click(function(e){
e.preventDefault()
})
第二： 如果是点击按钮ajax提交，就要在提交之后禁用掉按钮，以免重复提交，这个在平时各种情况下的表单提交都考虑进去
禁用按钮，加disabled属性，或者加pointer-event:none属性，或者用一个count来计数，只有在点击一次的时候才提交表单
通常在提交成功之后会刷新或跳转页面，失败则不会，要注意一下，如果提交失败，把禁用的按钮解除禁用let count = 0;
$('#submit').click(function(){
count++;
if (page.clicktime == 1) {
setTimeout(()=>{
$.ajax({
success:res=>{
if(!res.success){
count = 0 // 提交按钮解除禁用
}
},
error:err=>{
count = 0 // 提交按钮解除禁用
}
})
})
}
// $(this).attr('disabled,true) // 禁用按钮or
// $(this).css('pointer-event','none') // 来禁用点击事件
})
第三： 如果是点击选项提交，那么就要考虑label和input的关联问题了，点击label， 事件冒泡，input也会触发一次提交
可以这样来处理$('label').click(function(e) {
if($(e.target).is('input')){ // 点击label的时候，如果事件源是input,那么就把它禁用掉
return;
}
});
最后，其他的点击事件也可以这样处理, 避免多次触发事件var isclick = true
$('#id').click(function(){
if(isclick){
isclick = false; // 如果双击不想触发两次点击事件，可以在这里加一个禁用点击事件
$(this).css('pointer-event','none')
// do something
setTimeout(()=>{ // 在这里过段时间再释放使得可以再次触发点击事件
$(this).css('pointer-event','none')
isclick = true
})
}
})
想要了解更多相关知识，请关注 html中文网！！