html按钮怎么避免重复提交

[复制链接]
查看: 8543   回复: 9
发表于 2024-7-3 18:39:39 | 显示全部楼层 |阅读模式
html按钮怎么避免重复提交  比如用户提交开通邮箱xxx@acc.com 我的想法是调用xxx@acc.com变量来写一旦出现xxx@acc.com按钮就不可用
但问题是我不知道怎么实现他
代码:
回复

使用道具 举报

 楼主| 发表于 2024-7-3 18:39:58 | 显示全部楼层
html点提交按钮后给加个事件,让按钮变成不可点击状态即可,
这是前端方法,

后端一般通过CSFR_token来鉴定这是不是属于重复提交
回复 支持 反对

使用道具 举报

 楼主| 发表于 2024-7-3 18:40:26 | 显示全部楼层
如果是列表接口get的话,可以用debounce
如果是form表单的话,可以加个变量canCommit
点击提交按钮立即置为false,请求结束或者失败,置为true
回复 支持 反对

使用道具 举报

 楼主| 发表于 2024-7-3 18:40:31 | 显示全部楼层
HTML:
  1. <button mat-raised-button class="btn btn-linkedin mat-raised-button pull-right" (click)="onSubmit()" [disabled]="!loading">Submit</button>
复制代码


JS:
  1. onSubmit() {// Disable Create Buttonthis.loading = true;this.xxxService.createXXX(this.formData)        .pipe(first())        .subscribe({                next: (data) => {                        if (data.successful) {                                this.commonService.showNotification('success', 'Creation successful');                                this.router.navigate(['/xxx/detail/' + data.returnedObject.xxId], { relativeTo: this.route });                        } else {                                this.commonService.showNotification('danger', data.errorStr);                                this.loading = false;                        }                },                error: error => this.commonService.handleError(error),        });}
复制代码
回复 支持 反对

使用道具 举报

发表于 2024-7-3 18:41:26 | 显示全部楼层
点击之后按钮加个 disabled
回复 支持 反对

使用道具 举报

发表于 2024-7-3 18:41:50 | 显示全部楼层
html按钮怎么避免重复提交  比如用户提交开通邮箱xxx@acc.com 我的想法是调用xxx@acc.com变量来写一旦出现xxx@acc.com按钮就不可用
但问题是我不知道怎么实现他
回复 支持 反对

使用道具 举报

发表于 2024-7-3 18:42:41 | 显示全部楼层
禁止不就好了
回复 支持 反对

使用道具 举报

 楼主| 发表于 2024-7-3 18:42:49 | 显示全部楼层
点一次就禁用 后端如果返回开通失败就重新启用
回复 支持 反对

使用道具 举报

发表于 2024-7-3 18:43:21 | 显示全部楼层
这个是永久有效吗
我更新了帖子
回复 支持 反对

使用道具 举报

 楼主| 发表于 2024-7-3 18:44:13 | 显示全部楼层
不知道怎么写
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则