前端点击按钮只能发送一次请求,并且按钮附带转圈效果,当成功之后取消转圈
时间: 2023-11-14 19:06:06 浏览: 42
这是一个比较常见的前端操作,可以通过以下步骤实现:
1. 给按钮添加点击事件监听器,当按钮被点击时触发事件。
2. 在事件处理程序中,首先禁用按钮,以防止用户重复点击。可以通过按钮的 `disabled` 属性来实现。
3. 在按钮上添加一个加载动画,用来提示用户正在处理中。可以通过添加一个带有旋转动画的图标或者使用 CSS3 动画来实现。
4. 发送请求,使用 AJAX 或者 Fetch API 等方式发送请求,并在请求发送成功后执行相应的操作,比如更新页面内容或者显示成功提示信息。
5. 在 AJAX 或者 Fetch 请求的回调函数中,启用按钮,并移除加载动画,以便用户可以再次点击按钮。
下面是一个示例代码:
```html
<button id="submit-btn">提交</button>
```
```css
#submit-btn {
position: relative;
}
#submit-btn.loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #333;
animation: rotate 0.8s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
```
```javascript
const submitBtn = document.getElementById('submit-btn');
submitBtn.addEventListener('click', function() {
// 禁用按钮
submitBtn.disabled = true;
// 添加加载动画
submitBtn.classList.add('loading');
// 发送 AJAX 请求
fetch('/api/submit', {
method: 'POST',
body: JSON.stringify({ data: 'example' }),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
// 在请求成功后执行相应操作
console.log('请求成功', response);
})
.catch(error => {
// 在请求失败后执行相应操作
console.log('请求失败', error);
})
.finally(() => {
// 启用按钮
submitBtn.disabled = false;
// 移除加载动画
submitBtn.classList.remove('loading');
});
});
```