900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 完美通行证表单重复提交是啥意思 – CSS – 前端 css3写的美食网站登录

完美通行证表单重复提交是啥意思 – CSS – 前端 css3写的美食网站登录

时间:2022-06-15 07:54:19

相关推荐

完美通行证表单重复提交是啥意思 – CSS – 前端 css3写的美食网站登录

表单重复提交是重复多次的提交同一表单的意思。

在平时开发中,如果网速比较慢的情况下,或者远程有延迟,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,这样会出现表单的重复提交,造成向服务器发送两次请求,所以大家在开发中必须防止表单。

表单重复提交的情况:

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;

}

});

最后,其他的点击事件也可以这样处理, 避免多次触发事件

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。