使用 jQuery ajax 將表單中的數據發送到 email 並通過傳遞 POST 變量重定向到另一個頁面不起作用

Question

我在 Wordpress 中有自己的表單，在填寫並單擊提交后，該表單將重定向到包含此表單中的感謝和數據的頁面。 同時，但在重定向之前，表單中的相同數據會發送到用戶和管理員電子郵件。 整個過程的步驟如下。

1. jQuery 中的表單驗證 Validate
2. 使用 jQuery ajax 將數據從表單發送到電子郵件
3. 重定向到感謝您的頁面，並使用 POST 方法（jQuery + PHP）將變量從表單發送到此頁面。

jQuery 代碼：

// validation
  $('#registration_form').validate({
    rules: {
      training_name: "required",
      training_place: "required",
      training_date: "required",
      participants_number: {
        required: true,
        range: [0,100]
      },
    (...) // etc 
  });



// jQuery ajax email sending
 $('#registration_form').on('submit', function(e) {
    // e.preventDefault();
    if ($(this).valid()) {
      let formData = $(this).serialize();
      $.ajax({
        url: ajax.url,
        type: 'POST',
        cache: false,
        async: true,
        xhrFields: {
          withCredentials: true
        },
        data: { 
          action: 'registerFormSendEmail', 
          form_data: formData
        },
        success: function(res) {
          // console.log(res);
        }
      });
      // return false;
    }
  });

在 html 表單代碼中，我有帶有 POST 變量的謝謝頁面的永久鏈接的操作名稱。 問題是有時使用 POST 變量發送電子郵件和重定向有效，有時則無效。 大多數情況下，它在 Safari 上不起作用。 有人知道為什么以及我做錯了什么？

Answer 1

我設法解決了這個問題。 后來發現，除了 Safari 以外的瀏覽器也沒有發送電子郵件。 問題是有時網站重定向的速度比使用 Ajax 發送的 email 更快（這可能取決於 Internet 連接的速度）。 我使用了.when()和.then()函數。 我修改了 ajax function，使表單數據首先必須成功發送到電子郵件，然后提交表單並重定向到“謝謝”頁面。

$('#submit_registration').on('click', function(e) {
    e.preventDefault();
    if ($('#registration_form').valid()) {
      let formData = $('#registration_form').serialize();
      var checkEmailSent;
      $.when(
        $.ajax({
          url: ajax.url,
          type: 'POST',
          dataType: 'JSON',
          cache: false,
          data: { 
            action: 'registerFormSendEmail', 
            form_data: formData,
          },
          success: function(res) {
            console.log(res);
            if (res !== 'sent') {
              alert('Error in sending e-mail.');
              checkEmailSent = false;
            }
          }
        })
      ).then(function() {
        if (checkEmailSent == false) {
          return false;
        } else {
          $('#registration_form').submit();
        }
      });
    }
  });