[疑问] html按钮怎么避免重复提交

moe

3年前

本帖最后由小旭于 2022-4-14 00:05 编辑

html按钮怎么避免重复提交比如用户提交开通邮箱[email protected] 我的想法是调用[email protected]变量来写一旦出现[email protected]按钮就不可用
但问题是我不知道怎么实现他
代码：新建文本文档 (7).zip (420 Bytes, 下载次数: 1)

5 小时前上传

点击文件名下载附件

html点提交按钮后给加个事件，让按钮变成不可点击状态即可，
这是前端方法，

后端一般通过CSFR_token来鉴定这是不是属于重复提交

如果是列表接口get的话，可以用debounce
如果是form表单的话，可以加个变量canCommit
点击提交按钮立即置为false，请求结束或者失败，置为true

本帖最后由 image 于 2022-4-13 23:44 编辑

HTML:

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

复制代码

JS:

onSubmit() {
// Disable Create Button
this.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),
});
}

复制代码

点击之后按钮加个 disabled

html按钮怎么避免重复提交比如用户提交开通邮箱[email protected] 我的想法是调用[email protected]变量来写一旦出现[email protected]按钮就不可用
但问题是我不知道怎么实现他

禁止不就好了

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

image 发表于 2022-4-13 23:36
HTML:

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

Lqdahv 发表于 2022-4-13 23:40
点一次就禁用后端如果返回开通失败就重新启用

不知道怎么写