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

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

SweetAlert2 - Dynamic queue without clicking confirm button?

queue

ajax

dynamic

sweetalert