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

我有以下的项目，我正在工作。它以一个封装在表单中的测验开始，测验的每个问题都有一个特定的响应，需要根据用户的答案显示。提交测验后，会发出一个ajax调用，接收答案并为正确的答案分配变量。这些回答，连同测验中发布的其他一些数据，被发送到一个页面，该页面根据答案动态构建并通过电子邮件发送PDF

我遇到的问题是，有时候ajax调用不起作用。PDF仍然生成并通过电子邮件发送，测验中的所有正常post数据仍然存在，但它缺少所有ajax变量。我发现这是因为PDF页面是在Ajax调用完成之前加载的。我发出警报；在ajax调用之后，这似乎在大多数情况下都能修复它，但仍有一些情况下它返回的PDF缺少值

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

“提交”按钮：

 <input class="sg-button sg-submit-button" id="sg_SubmitButton" onclick="set_session()" type="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，我不知道为什么？

我建议类似以下伪代码大纲的内容：

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();
        }
    });

}

$buttonsend\u stuff\u via\u ajax。单击send\u stuff\u via\u ajax

---

这里最关键的一点是，您不仅可以使用submit设置处理程序函数，还可以实际触发submit。同样的方法也适用于单击等操作。

1-将set\u会话移动到表单元素 2-下一步将set_会话方法更改为并重定向 ... $.post，{data}，functiondata{ window.location.replacehttps://path_to_pdf_file; } 返回false

向onSubmit调用返回false是很重要的，$.post函数的数据部分看起来是错误的：

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

您正在将success函数作为参数发送到data部分，而不是将其作为第三个参数发送到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();
     }
   });

尽管这可能没有什么区别，但您也可以删除内联click hander onclick=set_会话，并用以下内容替换函数名：

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

---

你为什么提出两个要求？这两者之间没有用户交互，因此您可以在一个请求中完成所有操作，例如ajax调用。您的$.post函数看起来不正确，这是真正的代码吗？这两个post请求是为了方便，实际上，一些数据不需要对其进行任何处理，例如名称，所以我没有麻烦通过ajax函数发送它。是的，这是真正的代码。我会在一个请求中完成所有操作，但是看到我关于当前问题的答案。这似乎仍然不起作用，我仍然会得到空白的PDF。我猜这可能与PDF的生成方式有关？

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