论坛主页 › VPS专版 › html按钮怎么避免重复提交

灌水王 发表于 2024-7-3 18:39:39

html按钮怎么避免重复提交

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:

<button mat-raised-button class="btn btn-linkedin mat-raised-button pull-right" (click)="onSubmit()" ="!loading">Submit</button>


JS:

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),      });}

fucker123 发表于 2024-7-3 18:41:26

点击之后按钮加个 disabled

hcpoker 发表于 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

点一次就禁用 后端如果返回开通失败就重新启用

tooko 发表于 2024-7-3 18:43:21

这个是永久有效吗
我更新了帖子

灌水王 发表于 2024-7-3 18:44:13

不知道怎么写

查看完整版本: html按钮怎么避免重复提交