1

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

2 回答 2

3

您应该将带有 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>

于 2016-11-25T10:43:53.510 回答
1

我的自动提交表单的工作示例，带有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
                        })
                    })
        }
    }]);
于 2019-07-28T11:12:16.517 回答