javascript寫的HTML,按A鍵post成功後,過了一秒B鍵才能按,並处理网络请求失败的情况以及如何防止用户在等待期间重复提交。
时间: 2023-06-20 21:03:46 浏览: 48
实现这个功能可以考虑以下步骤:
1. 给 A 和 B 按钮绑定点击事件,当 A 按钮被点击时,发送网络请求,请求成功后才启用 B 按钮。
```javascript
const btnA = document.querySelector('#btnA')
const btnB = document.querySelector('#btnB')
btnA.addEventListener('click', () => {
// 发送网络请求
fetch('http://example.com/api', {
method: 'POST',
body: JSON.stringify({}),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
if (response.ok) {
// 启用 B 按钮
btnB.removeAttribute('disabled')
} else {
throw new Error('请求失败')
}
})
.catch(error => {
console.log(error)
// 处理网络请求失败的情况
})
})
```
2. 在发送网络请求时,禁用 A 和 B 按钮,防止用户在等待期间重复提交。
```javascript
const btnA = document.querySelector('#btnA')
const btnB = document.querySelector('#btnB')
btnA.addEventListener('click', () => {
// 禁用 A 和 B 按钮
btnA.setAttribute('disabled', true)
btnB.setAttribute('disabled', true)
// 发送网络请求
fetch('http://example.com/api', {
method: 'POST',
body: JSON.stringify({}),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
if (response.ok) {
// 启用 B 按钮
btnB.removeAttribute('disabled')
} else {
throw new Error('请求失败')
}
})
.catch(error => {
console.log(error)
// 处理网络请求失败的情况
// 启用 A 按钮
btnA.removeAttribute('disabled')
})
})
```
这样就可以实现在按下 A 按钮后,过了一秒钟才能按 B 按钮的功能,并且在等待期间禁用了 A 和 B 按钮,防止用户重复提交。