使用sweetalert加载进度表单提交

Question

我想在提交表单时渲染等待时间动画，但我更喜欢使用SweetAlert而不是标准的加载图片。

这是基本代码：

＆＃13;

＆＃13;

$("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
                }
            });
        });

＆＃13;

＆＃13;

＆＃13;

这是SweetAlert想要实现的代码：

＆＃13;

＆＃13;

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);

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

plz有人提出了这样做的提示

Answer 1

你快到了！只需使用甜蜜的警报代码替换#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
                    });
                }
            });
        });