如何在等待Ajax完成时显示SweetAlert2加载对话框

我正在使用SweetAlert2，尝试过单个对话框但未能实现需求。见过基于fetch的相关示例，但自己用的是Ajax，嵌套对话框的示例也都是基于fetch的。我的代码中有两处注释位置，需要分别实现加载对话框的开启和关闭操作，脚本如下：

$(document).on("submit", "#formNuevoEstudiante", function (event) {
  event.preventDefault();
  $("#btnSubmit").prop("disabled", true);
  let ap_paterno = $("#ap_paterno").val();
  let ap_materno = $("#ap_materno").val();
  let nombre = $("#nombre").val();
  let sexo = $("#sexo option:selected").val();
  let no_control = $("#no_control").val();
  let carrera = $("#carrera option:selected").val();
  let semestre = $("#semestre option:selected").val();

  let sexo2 = sexo == "F" ? "Femenino" : "Masculino";
  let mensaje = `x`;
  let mensaje2 = `x`;
  //Here is where I wan't to integrate the loading dialog
  $.ajax({
    url: "utils/ajax/nuevo_estudiante.php",
    method: "POST",
    data: {
      ap_paterno: ap_paterno,
      ap_materno: ap_materno,
      nombre: nombre,
      sexo: sexo,
      no_control: no_control,
      carrera: carrera,
      semestre: semestre,
    },
    success: function (resp) {
      if (resp == "existe") {
        Swal.fire({
          title: "Ya se encuentra registrado",
          text: "x",
          icon: "warning",
          confirmButtonText: "Aceptar",
          confirmButtonColor: "#0275D8",
        }).then(function () {
          window.location.href = "index2.php";
        });
      } else if (resp == "error") {
        Swal.fire({
          title: "Error",
          text: "x",
          icon: "error",
          confirmButtonText: "Aceptar",
          confirmButtonColor: "#0275D8",
        });
      } else if (resp == "ok") {
        //Here is where I wan't to close the loading dialog
        Swal.fire({
          title: "Registro exitoso",
          html: "<pre>" + mensaje + "</pre>" + mensaje2,
          icon: "success",
          confirmButtonText: "Aceptar",
          confirmButtonColor: "#0275D8",
        }).then(function () {
          window.location.href = "index2.php";
        });
      }
    },
  });
});

解决方案 #

要在Ajax请求中实现加载对话框，你需要：

1. 在发起Ajax请求前，创建并显示SweetAlert2的加载弹窗，保存弹窗实例以便后续关闭
2. 在Ajax的success和error回调中，先关闭加载弹窗，再显示对应的结果弹窗

修改后的完整代码如下：

$(document).on("submit", "#formNuevoEstudiante", function (event) {
  event.preventDefault();
  $("#btnSubmit").prop("disabled", true);
  let ap_paterno = $("#ap_paterno").val();
  let ap_materno = $("#ap_materno").val();
  let nombre = $("#nombre").val();
  let sexo = $("#sexo option:selected").val();
  let no_control = $("#no_control").val();
  let carrera = $("#carrera option:selected").val();
  let semestre = $("#semestre option:selected").val();

  let sexo2 = sexo == "F" ? "Femenino" : "Masculino";
  let mensaje = `x`;
  let mensaje2 = `x`;

  // 开启加载对话框
  const loadingSwal = Swal.fire({
    title: '处理中',
    text: '请稍候...',
    allowOutsideClick: false, // 禁止点击外部关闭弹窗
    didOpen: () => {
      Swal.showLoading(); // 显示加载动画
    }
  });

  $.ajax({
    url: "utils/ajax/nuevo_estudiante.php",
    method: "POST",
    data: {
      ap_paterno: ap_paterno,
      ap_materno: ap_materno,
      nombre: nombre,
      sexo: sexo,
      no_control: no_control,
      carrera: carrera,
      semestre: semestre,
    },
    success: function (resp) {
      // 先关闭加载对话框
      loadingSwal.close();

      if (resp == "existe") {
        Swal.fire({
          title: "该用户已注册",
          text: "x",
          icon: "warning",
          confirmButtonText: "确定",
          confirmButtonColor: "#0275D8",
        }).then(function () {
          window.location.href = "index2.php";
        });
      } else if (resp == "error") {
        Swal.fire({
          title: "错误",
          text: "x",
          icon: "error",
          confirmButtonText: "确定",
          confirmButtonColor: "#0275D8",
        });
      } else if (resp == "ok") {
        Swal.fire({
          title: "注册成功",
          html: "<pre>" + mensaje + "</pre>" + mensaje2,
          icon: "success",
          confirmButtonText: "确定",
          confirmButtonColor: "#0275D8",
        }).then(function () {
          window.location.href = "index2.php";
        });
      }
    },
    error: function() {
      // 请求失败时关闭加载对话框并提示错误
      loadingSwal.close();
      Swal.fire({
        title: "请求失败",
        text: "网络或服务器错误",
        icon: "error",
        confirmButtonText: "确定",
        confirmButtonColor: "#0275D8",
      });
      // 恢复提交按钮可用状态
      $("#btnSubmit").prop("disabled", false);
    }
  });
});

关键说明 #

• 创建加载弹窗时，通过didOpen回调调用Swal.showLoading()显示加载动画，设置allowOutsideClick: false防止用户误关闭弹窗
• 无论请求成功还是失败，都要先关闭加载弹窗，再展示结果弹窗
• 新增error回调处理请求失败的情况，避免加载弹窗一直显示，同时恢复提交按钮的可用状态

内容的提问来源于stack exchange，提问作者Luis Villegas