function submitForm() { const phone = phoneNumberInput.value; if (!phone) { alert('请输入手机号码'); return; } submitBtn.disabled = true; axios.post(API_URL, { phone }) .then(() => { alert('提交成功'); }) .catch(() => { alert('提交失败'); }) .finally(() => { submitBtn.disabled = false; }); }。优化这个代码,使得代码的alert输出能够在移动端显示
时间: 2024-01-17 19:02:52 浏览: 101
可以使用移动端友好的提示框库,比如 SweetAlert2。安装 SweetAlert2 后,可以按照下面的方式来优化代码:
首先,在 HTML 文件中引入 SweetAlert2 的样式和脚本:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.17/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.17/dist/sweetalert2.all.min.js"></script>
```
然后,在 JavaScript 文件中使用 SweetAlert2 的提示框:
```javascript
function submitForm() {
const phone = phoneNumberInput.value;
if (!phone) {
Swal.fire('请输入手机号码');
return;
}
submitBtn.disabled = true;
axios.post(API_URL, { phone })
.then(() => {
Swal.fire('提交成功');
})
.catch(() => {
Swal.fire('提交失败');
})
.finally(() => {
submitBtn.disabled = false;
});
}
```
这样就可以在移动端使用更友好的提示框了。
阅读全文