提交表单之前如何确保Ajax调用完成？

Question

我正在从事以下项目。 它以包裹在表单中的测验开始，该测验的每个问题都有特定的响应，需要根据用户的答案进行显示。 提交测验后，将进行ajax调用，以接受答案并为正确的响应分配变量。 这些响应以及测验中发布的其他数据将发送到页面，该页面根据答案动态生成并通过电子邮件发送PDF。

我遇到的问题是，有时ajax调用无法正常工作。 PDF仍会生成并通过电子邮件发送，并且测验中的所有正常发布数据仍然存在，但缺少所有的ajax变量。 我发现这最初是由于在Ajax调用完成之前加载了PDF页面而发生的。 我放了一个alert（）; 在ajax调用之后，这似乎在大多数情况下都可以解决，但是仍然有实例会返回缺少值的PDF。

因此，我的问题是，在进入PDF生成页面之前，确保ajax调用完成的更好方法是什么？ 我仍然需要它提交表单，因为有些发布的变量没有在ajax中发送。 我已经尝试了多种方法，从警报到超时几秒钟作为回调函数，再到下面列出的当前尝试方法。

提交按钮：

 <input class="sg-button sg-submit-button" id="sg_SubmitButton" onclick="set_session()" type="submit" 

Ajax电话：

function set_session()
{

    event.preventDefault();
    names = [];
    text = [];
    $('input:checked').each(function() 
        {
    names.push($(this).attr("value"));
        });

    $('input:checked').each(function() 
        {
    text.push($(this).attr("title"));
        });


    question_one_val = names[0];
    question_one_text = text[0];
    question_two_val = names[1];
    question_two_text = text[1];
    question_three_val = names[2];
    question_three_text = text[2];
    question_four_val = names[3];
    question_four_text = text[3];
    question_five_val = names[4];
    question_five_text = text[4];
    question_six_val = names[5];
    question_six_text = text[5];
    question_seven_val = names[6];
    question_seven_text = text[6];
    question_eight_val = names[7];
    question_eight_text = text[7];
    question_nine_val = names[8];
    question_nine_text = text[8];
    question_ten_val = names[9];
    question_ten_text = text[9];
    question_eleven_val = names[10];
    question_eleven_text = text[10];
    question_twelve_val = names[11];
    question_twelve_text = text[11];
    question_thirteen_val = names[12];
    question_thirteen_text = text[12];
    name_val = $('.name_val').val();
 $.post("ajax_request.php", 
    {first_question: question_one_val,
     first_question_text: question_one_text,
     second_question: question_two_val,
     second_question_text: question_two_text,
     third_question: question_three_val,
     third_question_text: question_three_text,
     fourth_question: question_four_val,
     fourth_question_text: question_four_text,
     fifth_question: question_five_val,
     fifth_question_text: question_five_text,
     sixth_question: question_six_val,
     sixth_question_text: question_six_text,
     seventh_question: question_seven_val,
     seventh_question_text: question_seven_text,
     eighth_question: question_eight_val,
     eighth_question_text: question_eight_text,
     ninth_question: question_nine_val,
     ninth_question_text: question_nine_text,
     tenth_question: question_ten_val,
     tenth_question_text: question_ten_text,
     eleventh_question: question_eleven_val,
     eleventh_question_text: question_eleven_text,
     twelveth_question: question_twelve_val,
     twelveth_question_text: question_twelve_text,
     thirteenth_question: question_thirteen_val,
     thirteenth_question_text: question_thirteen_text,
      success: function(){


      $('#sg_FormFor1557763').submit()

  }

    });








}

然后是处理ajax的地方。 我将只包括一个小样本，因为在所有情况下它都会做同样的事情。

$test = $_POST['first_question'];
$test = question_one($test);
$_SESSION['question_one']=$test;

 function question_one($test)
    {
        $question_one_response_a = "Response for A";
$question_one_response_b = "Response for B";
$question_one_response_c = "Response for C";
$question_one_response_d = "Response for D";
$question_one_response_e = "Response for E";



        $question_one_response="test";
        if ($test == "a")
            {
                $question_one_response = $question_one_response_a;
            }
        elseif($test == "b")
            {
                $question_one_response = $question_one_response_b;
            }

        elseif($test == "c")
            {
                $question_one_response = $question_one_response_c;
            }

        elseif($test == "d")
            {
                $question_one_response = $question_one_response_d;
            }

        elseif($test == "e")
            {
                $question_one_response = $question_one_response_e;
            }
        else 
        {
            $question_one_response = "your getting an error";
        }
            return $question_one_response;
    }

现在，该代码在大多数情况下似乎是正确的，因为它确实起作用，但并非每次都正确。 我会说它是否有效大约是50/50，我不知道为什么？

Answer 1

我建议使用以下伪代码概述：

function handle_form_submission(e) {
    // Do whatever needs to be done
};

$('form#myform').submit(handle_form_submission);

function send_stuff_via_ajax() {

    $.ajax({
        url: 'server_side_script.php',
        type: 'post',
        data: {
            // Whatever you wish to send to the server
        },
        success: function(result) {
            if (result == 'all_good') {
                // Everything is cool, submit the form
                $('form#myform').submit();
            } else {
                // Try the ajax again
                send_stuff_via_ajax();

                // Warning this could result in an infinite look without some limiter
            }
        },
        error: function(result) {
            // Also try again
            send_stuff_via_ajax();
        }
    });

}

$（“ button＃send_stuff_via_ajax”）。click（send_stuff_via_ajax）;

这里的关键是，您不仅可以使用submit()设置处理程序函数，还可以实际触发提交。 click()等也可以使用相同的方法。

Answer 2

1-将set_session移到表单元素
<form onSubmit="return set_session();" >
2-下一步将set_session方法更改为并重定向
...
$.post(<url>, {data}, function(data) {
window.location.replace("https://path_to_pdf_file");
}

return false;

将false返回到onSubmit调用很重要

Answer 3

$.post()函数的data部分看起来是错误的：

   $.post("ajax_request.php", {
     first_question: question_one_val,
     // ...
     thirteenth_question_text: question_thirteen_text,
     success: function(){
       $('#sg_FormFor1557763').submit()    
      }
   });

您将成功函数作为数据部分中的参数发送，而不是将其作为第三个参数传递给post函数。 那可能导致您的问题。

您应该将其更改为：

   $.post(
     "ajax_request.php",
     {
       first_question: question_one_val,
       // ...
       thirteenth_question_text: question_thirteen_text
     },
     // The third parameter is your callback function that is executed if the request succeeds
     function() {
       $('#sg_FormFor1557763').submit();
     }
   });

尽管可能没有什么区别，但是您也可以删除内联单击处理程序onclick="set_session()"并用类似以下内容的函数名称来代替：

$('form').on('submit', function() {
  // the contents of your function
});