Sweet Alert - 没有确认按钮的Ajax调用

Question

如何在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");
    });
});

- adam78

---

https://limonte.github.io/sweetalert2/#ajax-request - Limon Monte

Answer 1

您无需进行任何特别的操作。只需在显示 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" />

- Ozan

Answer 2

在PotatoFarmer的回答的帮助下，我想出了一个解决方案。

当结果准备好时，模态框会关闭。

// create a 'Swal' variable
const WaitingModal = Swal.fire({
    icon: 'info',
    title: 'Fetching...',
    showConfirmButton: false,
    allowOutsideClick: false,
    
    // show loading on open
    didOpen: ()  => {
        Swal.showLoading();
    }
});

const url = '//api.github.com/users/benjamintemitope';

fetch(url)
.then(response => {
    if (!response.ok) {
      throw new Error(response.statusText)
    }
    return response.json();
})
.catch(error => {
    Swal.showValidationMessage(
      `Request failed: ${error}`
    )
    WaitingModal.hideLoading(); // hide loading
})
.then((result) => {
    console.log(result); // output

    WaitingModal.hideLoading();

    WaitingModal.close(); // close Swal Modal
})

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

- benjamintemitope

Answer 3

基于Ozan非常有帮助的答案的实现示例：

使用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
    })

- PotatoFarmer