SweetAlert2 - 没有点击确认按钮的动态队列？答案

【问题标题】：SweetAlert2 - Dynamic queue without clicking confirm button?SweetAlert2 - 没有点击确认按钮的动态队列？
【发布时间】：2016-11-25 09:41:18
【问题描述】：

我正在使用最新版本的 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();
            });
        });
    }
}])

【问题讨论】：

标签： ajax dynamic queue sweetalert sweetalert2

【解决方案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)
      })
  }
}])

&lt;script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"&gt;&lt;/script&gt;

【讨论】：

感谢您的快速回复！因此，我创建了一个小提琴并使用您的示例创建了一个 AJAX 调用，它应该加载一个完整的网站页面。您认为这是加载从 AJAX 调用接收到的大量/大量数据的好解决方案吗？ jsfiddle.net/wzrcdwx3
当然，为什么不呢。有一个加载器指示正在进行的过程。

【解决方案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
                        })
                    })
        }
    }]);

【讨论】：