如何在SweetAlert2弹窗内实现Ajax请求处理功能？

我来帮你搞定这个问题！你现在的代码已经有了SweetAlert2的基础结构，只需要把Ajax逻辑整合到preConfirm回调里就行——因为它支持返回Promise，弹窗会自动等待请求完成后再进行后续操作。下面是修正并完善后的代码，我会一步步解释关键部分：

完整代码（基于原生Fetch API） #

Swal.fire({
  title: 'Request PlayForm',
  html: `<textarea name="da" id="da"></textarea>`,
  confirmButtonText: 'Submit',
  focusConfirm: false,
  preConfirm: () => {
    // 先获取输入框的值，修正你原来的变量名错误
    const textData = Swal.getPopup().querySelector('#da').value;
    
    // 第一步：输入验证
    if (!textData.trim()) {
      Swal.showValidationMessage(`Please enter details.`);
      // 返回拒绝的Promise，阻止弹窗关闭
      return Promise.reject();
    }

    // 第二步：发起Ajax请求
    return fetch('/your-api-endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ da: textData })
    })
    .then(response => {
      // 处理服务器返回的错误状态码（比如400、500）
      if (!response.ok) {
        return response.json().then(err => {
          throw new Error(err.message || 'Request failed');
        });
      }
      // 请求成功，返回服务器响应数据
      return response.json();
    })
    .catch(error => {
      // 捕获网络错误或服务器错误，显示验证提示
      Swal.showValidationMessage(`Request error: ${error.message}`);
      // 继续拒绝Promise，让后续catch处理
      return Promise.reject(error);
    });
  }
})
.then((result) => {
  // 请求成功时展示成功弹窗
  Swal.fire({
    icon: 'success',
    title: 'Email Sent Successfully',
    text: `Server response: ${result.message}` // 根据你的API返回结构调整
  });
})
.catch((error) => {
  // 请求失败或用户取消弹窗时处理（排除用户取消的情况）
  if (error instanceof Error) {
    Swal.fire({
      icon: 'error',
      title: 'Oops...',
      text: error.message || 'Something went wrong!'
    });
  }
});

关键部分解释 #

1. 修正变量错误：你原来的代码里定义了textData却用了未声明的da，这会导致报错，现在已经统一为textData。
2. 输入验证逻辑：如果输入为空，显示验证提示并返回Promise.reject()，阻止弹窗关闭，直到用户输入内容。
3. Ajax请求整合：在preConfirm里发起请求，利用它支持Promise的特性，让SweetAlert2等待请求完成再执行后续逻辑。
4. 响应处理：
   • 检查服务器响应状态码，非2xx状态码时解析错误信息并抛出异常。
   • 捕获网络错误，显示对应的验证提示。
5. 结果展示：
   • 成功时展示带success图标的弹窗，可使用服务器返回的数据定制提示内容。
   • 失败时展示错误弹窗，显示具体的错误信息。

如果你用jQuery的$.ajax版本 #

如果你的项目依赖jQuery，也可以用下面的写法：

Swal.fire({
  title: 'Request PlayForm',
  html: `<textarea name="da" id="da"></textarea>`,
  confirmButtonText: 'Submit',
  focusConfirm: false,
  preConfirm: () => {
    const textData = Swal.getPopup().querySelector('#da').value;
    
    if (!textData.trim()) {
      Swal.showValidationMessage(`Please enter details.`);
      return Promise.reject();
    }

    return new Promise((resolve, reject) => {
      $.ajax({
        url: '/your-api-endpoint',
        method: 'POST',
        data: { da: textData },
        success: (data) => resolve(data),
        error: (xhr) => {
          const errorMsg = xhr.responseJSON?.message || 'Request failed';
          Swal.showValidationMessage(`Request error: ${errorMsg}`);
          reject(new Error(errorMsg));
        }
      });
    });
  }
})
.then((result) => {
  Swal.fire({
    icon: 'success',
    title: 'Email Sent Successfully',
    text: `Server response: ${result.message}`
  });
})
.catch((error) => {
  if (error instanceof Error) {
    Swal.fire({
      icon: 'error',
      title: 'Oops...',
      text: error.message
    });
  }
});

注意事项 #

• 把/your-api-endpoint替换成你实际的API接口地址。
• 根据你的API返回结构调整响应处理逻辑（比如有的API返回{ success: true, msg: "..." }，需要对应修改取值方式）。
• 如果需要发送表单格式的数据而非JSON，调整请求头部和请求体（比如使用FormData）。

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