防止前端按钮重复提交数据问题

9,009

一、问题导入

当我们在页面进行点点点的操作时,很可能遇到点击两次的行为,这时候提交或保存按钮也没有进行校验,很可能保存两份数据,因此,作为开发人员,对需要保存类似的按钮进行校验很有必要。

二、问题分析

我们通过控制isDisable 来设置 disabled来控制按钮的点击和不可点击。 默认isDisable:的值为 false,按钮可以点击。 当我们点击这个按钮的时候,首先将按钮的绑定isDisable设置为true,1秒后立马将其置为false。此时,用户就不能多点了, 过了一秒的时间后才能去操作这个按钮。

sendComment () {
this.disabled = true
if (this.text == ''){
this.$message({
type:'error',
message:'输入内容不能为空',
})
this.disabled = false
}else{
this.$post('/xx/xx/IdleGoodsComment',{
goods_id:this.$route.params.id,
content:this.text,
user_id:window.uId,
type:1
}).then((res) => {
if(res){
this.getDetail()
setTimeout(()=>{
this.disabled=false
this.getCommentList()
this.text = ''}
,1000)
}
})
}
}

以上代码是通过计时器将button属性更改,点击完之后讲button属性设置为disable

vue绑定button的disable属性为:disabled:'变量名'。

三、总结

  1. 页面按钮要注意多次点击重复提交数据
  2. 这里用的vue案例介绍,如果是使用别的前端框架,其思想大同小异