Question

我使用以下代码创建了SweetAlert。使用完此功能后，结果显示为但，但我尚未按OK，而已跳转到我设置的URL。

这是我创建的SweetAlert脚本（我想在使用时将其保存在脚本中，然后因为使用Laravel框架而将其从中删除）。

<script type="text/javascript">
  function showSuccessSwal(message) {
    Swal.fire(
      'Success',
      message,
      "success"
    );
  }

  function showErrorSwal(message) {
    Swal.fire(
      'Error',
      message,
      "error"
    );
  }
</script>

这是我正在使用的脚本：

  <script type="text/javascript">
    $('#somthing-form').submit(function(e) {
      e.preventDefault();

      var form = $(this);

      $.ajax({
        type: 'POST', // GET, POST, PUT
        url: form.attr('action'),
        data: form.serialize(),
        success: function(result) {
          showSuccessSwal(result.message);
          window.location.href="{{ route('something.index') }}";
        },
        error: function(xhr) {
          var errorString = '';
          var errors = xhr.responseJSON.errors;
          Object.keys(errors).forEach(function(key) {
            var error_message = errors[key];
            $.each(error_message, function(key, value) {
              errorString += value + '\n';
            });
          });
          showErrorSwal(errorString);
        }
      });
    });
  </script>

我希望结果像这样工作：

我按下了提交按钮。
通过“确定”按钮显示SweetAlert。
等待用户按OK（确定）按钮，然后转到我设置的URL（在按OK（确定）按钮之前不要直接跳转到URL）。

Answer 1

您需要先调用swal，然后再调用ajax

swal({
    title: 'Are you sure to go ahead?,
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, please!'
    }).then(function(result) {
        if (result.value) { // when you click `yes, please!`
            $.ajax({
                type: 'POST', // GET, POST, PUT
                url: form.attr('action'),
                data: form.serialize(),
                success: function(result) {
                showSuccessSwal(result.message);
                window.location.href="{{ route('something.index') }}";
            },
            error: function(xhr) {
                var errorString = '';
                var errors = xhr.responseJSON.errors;
                Object.keys(errors).forEach(function(key) {
                    var error_message = errors[key];
                    $.each(error_message, function(key, value) {
                        errorString += value + '\n';
                    });
                });
                showErrorSwal(errorString);
            });
        }
});

如何通过“确定”按钮使用SweetAlert成功？

1 个答案: