如何在没有确认按钮的情况下使用sweetalert进行Ajax调用但仍显示加载gif?基本上我想在Ajax调用运行时显示加载gif。开箱即用的解决方案要求您在进行Ajax调用之前启用确认按钮。
以下显然不起作用:
window.swal({
title: "Checking...",
text: "Please wait",
imageUrl: "images/ajaxloader.gif",
showConfirmButton: false,
allowOutsideClick: false
},
function () {
$.getJSON('myurl').done(function (data) {
swal("", "Good job!", "success");
}).fail(function (jqXHR, textStatus, err) {
swal("", "An error occurred", "error");
});
});
答案 0 :(得分:5)
你不需要做任何特别的事情。只需在显示swal后进行ajax调用,并在完成ajax后再次调用swal。
window.swal({
title: "Checking...",
text: "Please wait",
imageUrl: "images/ajaxloader.gif",
showConfirmButton: false,
allowOutsideClick: false
});
//using setTimeout to simulate ajax request
setTimeout(() => {
window.swal({
title: "Finished!",
showConfirmButton: false,
timer: 1000
});
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" />
答案 1 :(得分:0)
基于Ozan's very helpful answer的实现示例:
使用vue-sweetalert2,VueJS 2和Axios,并内置加载程序动画:
let self = this;
this.$swal.fire({
title: "Processing Request...",
text: "Please wait",
onBeforeOpen() {
self.$swal.showLoading(); //Adds built in loader animation during modal open
},
onAfterClose() {
self.$swal.hideLoading(); //might not be necessary
},
allowOutsideClick: false, //makes modal behave captively
allowEscapeKey: false,
allowEnterKey: false
});
axios
.post(`/api/myapi`, {"fake": "fake"})
.then(r => {
this.$swal.update({
title: "Finished",
html: `Response data: ${r.data}`
});
this.$swal.hideLoading(); //Disables loader spinner, enables button
})
.catch(err => {
this.$swal.update({
title: "FAILED!",
text: "Something went wrong - either try again or contact support."
});
this.$swal.showValidationMessage(`Request failed: ${err}`);
this.$swal.hideLoading(); //Disables loader spinner, enables button
})