Question

我正在进行以下项目。它首先包含一个包含在表单中的测验，每个测验问题都有一个特定的响应，需要根据用户的答案显示。提交测验后，会进行ajax调用，接收答案并为正确的答案分配变量。这些回复以及测验中的其他一些发布数据将被发送到一个页面，该页面根据答案动态构建和发送PDF格式。

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

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

提交按钮：

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

Ajax Call：

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

}

$（ “按钮＃send_stuff_via_ajax”）点击（send_stuff_via_ajax）;

这里的关键点是你可以使用submit()来设置处理函数，还可以实际触发提交。同样的事情适用于click()等。

Answer 2

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

return false;

将false返回到onSubmit调用

非常重要

Answer 3

$.post()函数的数据部分看起来不对：

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

您将成功函数作为参数发送到数据部分，而不是将其作为第3个参数添加到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
});

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

3 个答案: