javascript 加载进度表使用sweetalert提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46773828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
loading progress form submit using sweetalert
提问by hertanet
I would like to render a waiting time animation when submitting a form, but I prefer to use SweetAlertrather than a standard loading image.
我想在提交表单时呈现等待时间动画，但我更喜欢使用SweetAlert而不是标准加载图像。
This the basic code:
这是基本代码：
$("form").submit(function (e) {
e.preventDefault(); // stops the default action
$("#loader").show(); // shows the loading screen
$.ajax({
url: test.php,
type: "POST"
success: function (returnhtml) {
$("#loader").hide(); // hides loading sccreen in success call back
}
});
});This is the code SweetAlert wants to implement:
这是 SweetAlert 想要实现的代码：
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" />plz someone make the tips for doing this
请有人提出这样做的提示
回答by ktilcu
You were almost there! Just replace the #loadercode with the sweet alert code.
你快到了！只需将#loader代码替换为甜蜜警报代码即可。
$("form").submit(function (e) {
e.preventDefault(); // stops the default action
//$("#loader").show(); // shows the loading screen
window.swal({
title: "Checking...",
text: "Please wait",
imageUrl: "images/ajaxloader.gif",
showConfirmButton: false,
allowOutsideClick: false
});
$.ajax({
url: test.php,
type: "POST"
success: function (returnhtml) {
//$("#loader").hide(); // hides loading sccreen in success call back
window.swal({
title: "Finished!",
showConfirmButton: false,
timer: 1000
});
}
});
});