SweetAlert2-动态队列而无需单击确认按钮

Question

我正在使用最新版本的jQuery插件SweetAlert2。我想使用" 动态队列" - 函数进行AJAX调用。因此，在主页上有一个很好的示例，但是您必须先单击确认按钮才能执行Ajax调用。我不想要此，当显示警报时，AJAX调用应立即执行，而无需单击按钮。那怎么做？

在这里，主页中的示例

swal.queue
([{
    title: 'Your public IP',
    confirmButtonText: 'Show my public IP',
    text: 'Your public IP will be received via AJAX request',
    showLoaderOnConfirm: true,
    preConfirm: function()
    {
        return new Promise(function (resolve)
        {
            $.get('https://api.ipify.org?format=json').done(function(data)
            {
                swal.insertQueueStep(data.ip);
                resolve();
            });
        });
    }
}])

Answer 1

您应该将带有AJAX请求的回调传递给onOpen参数：

Swal.queue([{
  title: 'Your public IP',
  confirmButtonText: 'Show my public IP',
  text:
    'Your public IP will be received ' +
    'via AJAX request',
  onOpen: () => {
    fetch('https://api.ipify.org?format=json')
      .then(response => response.json())
      .then(data => {
        Swal.insertQueueStep(data.ip)
      })
  }
}])

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

Answer 2

我的自动提交表单的工作示例带有sweetalert加载和显示结果。

var preMessage = $('#new-ad-form').attr('pre-message');
var formData = $('#new-ad-form').serialize();
var formUrl = $('#new-ad-form').attr('action');
Swal.queue([{
        allowOutsideClick: false,
        allowEscapeKey: false,
        title: preMessage,
        showConfirmButton: false,
        showCloseButton: false,
        showCancelButton: false,
        onOpen: () => {
            Swal.showLoading();
            return fetch(formUrl, {
                method: 'POST',
                body: formData,
                headers: {
                    'Accept': 'application/json, text/plain, */*',
                    'Content-Type': "application/x-www-form-urlencoded",
                }
            })
                    .then(response => response.json())
                    .then(data => {
                        Swal.hideLoading();
                        if (data.status == 'success') {
                            Swal.update({
                                allowEscapeKey: false,
                                allowOutsideClick: false,
                                showConfirmButton: false,
                                showCloseButton: false,
                                showCancelButton: false,
                                type: 'success',
                                title: false,
                                html: data.html
                            })
                        } else {
                            Swal.update({
                                type: 'error',
                                title: false,
                                html: data.html,
                                allowEscapeKey: true,
                                allowOutsideClick: true,
                                showConfirmButton: true,
                            })
                        }
                    })
                    .catch(() => {
                        Swal.hideLoading();
                        Swal.update({
                            type: 'error',
                            title: 'Save request error!',
                            html: false
                        })
                    })
        }
    }]);