sweetalert ajax 功能答案

【问题标题】：sweetalert ajax functionalitysweetalert ajax 功能
【发布时间】：2023-01-20 06:46:29
【问题描述】：

我正在尝试将 sweetAlert2 用于我的 ajax，在内部创建一个表单，然后执行它的过程并取回结果，但我被困在一个点上，即当我发送结果时，我如何处理其中的 ajax，

这是我现在的代码

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 (da== '') {
                Swal.showValidationMessage(`Please enter details.`)
                }
                return { da: da}
            }
            }).then((result) => {
            Swal.fire(`
                Email Sent Successfully -- this message should come when i get a success from my ajax else it will display error which i can get from ajax 
            `.trim())
        })

【问题讨论】：

标签： javascript jquery sweetalert2

【解决方案1】：

你可以这样做。

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 (da== '') {
      Swal.showValidationMessage(`Please enter details.`)
      }
      return { da: da}
  }
}).then((result) => {
  var myResult = result.value;
  // Do your result validation
  if(!myResult || myResult.trim() === "") {
    Swal.fire(`Error! Your input is invalid!`);
  // Everything's fine, let's call the AJAX
  } else {
    $.ajax({
      url: 'example.com/myendpoint',
      data: {'da':da},
      type: 'post', // or get, depending what you do in the background,
      // dataType: 'json' - data type of your response. It's optional, you can set it to something else, like text, or application/pdf, or something else
      beforeSend: function() {
        // disable buttons to prevent double clicks, or do something else
      },
      success: function(data) {
        // Process the response - data
        // Send mail if successful
        if(/* your checks go here*/) {
          Swal.fire(`
            Email Sent Successfully -- this message should come when i get a success from my ajax else it will display error which i can get from ajax 
            `.trim());
        } else {
          Swal.fire(`There was an error: ` /* your error here*/);
        }
      },
      error: function(desc, err) {
        Swal.fire("AJAX error! Description: " + JSON.stringify(desc) + ", error: " + JSON.stringify(error));
      }
    });
    // END AJAX
  }
  // END if / else for result.value
});
// END .then(...)

变量myResult（你可以随意命名）存储da的结果/你的preconfirm的返回。你可以稍后处理它，看看它是否符合你的预期（例如，是否有任何非法字符，或者你是否期待一个数字或某种格式，但用户决定厚颜无耻地输入一些东西其他等）。

如果输入没问题，您将转到 .then(...) 中的 else 部分，并在那里调用您的 AJAX。阅读代码中的 cmets 以获取更多信息。

【讨论】：