HTML網頁代碼,按A鍵post成功後,過了一秒B鍵才能按,並处理网络请求失败的情况以及如何防止用户在等待期间重复提交。
时间: 2023-06-20 11:03:39 浏览: 77
以下是一个简单的解决方案,使用JavaScript来处理点击事件和网络请求:
HTML代码:
```html
<button id="submit-btn" onclick="submitForm()">提交</button>
```
JavaScript代码:
```javascript
let isSubmitting = false; // 标记是否正在提交表单
function submitForm() {
if (isSubmitting) {
return; // 如果正在提交,则不做任何操作
}
// 获取表单数据
const formData = new FormData(document.querySelector('#my-form'));
// 发送网络请求
fetch('/submit-form', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
// 处理成功的情况
console.log('表单提交成功!');
} else {
// 处理失败的情况
console.error('表单提交失败:' + response.statusText);
}
})
.catch(error => {
console.error('表单提交失败:' + error.message);
})
.finally(() => {
isSubmitting = false; // 标记提交完成
});
isSubmitting = true; // 标记正在提交
// 禁用提交按钮,防止用户重复提交
const submitBtn = document.querySelector('#submit-btn');
submitBtn.disabled = true;
// 1秒后重新启用提交按钮
setTimeout(() => {
submitBtn.disabled = false;
}, 1000);
}
```
这段代码中,首先定义了一个`isSubmitting`变量来标记表单是否正在提交。当用户点击提交按钮时,首先会检查该变量的值,如果为`true`,则不做任何操作;否则,将标记设为`true`,禁用提交按钮,并发送网络请求。请求完成后,再将标记设为`false`,并在1秒后重新启用提交按钮。这样可以防止用户在等待期间重复提交表单。
在处理网络请求时,使用了`fetch`函数发送POST请求,并在请求完成后处理成功和失败的情况。当请求成功时,打印一条成功的消息;当请求失败时,打印一条错误信息。注意,这里使用了`finally`关键字,确保无论请求成功还是失败,都会将`isSubmitting`变量的值设为`false`。
阅读全文