简体   繁体   English

AJAX JQuery POST不起作用

[英]AJAX JQuery POST Not Working


I am unable to read the POST values I expect in my PHP script. 我无法读取PHP脚本中期望的POST值。 The request goes through it just does not serialize the data properly into the POST request aspect of it all. 请求通过它只是没有正确地将数据序列化到所有这一切的POST请求方面。 There is a moderate amount of code and I would rather you skip this than downvote it as I need help desperately and I know many of you do not wish to spend your time answering this long of a question. 代码数量适中,我宁愿您跳过这一步,也不愿对其投反对票,因为我急切需要帮助,而且我知道你们中的许多人不愿意花时间回答这么长时间的问题。

HTML: HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <form action="/core/enrollphase1.php" id="enrollPhase1" method="post" name="enrollPhase1">
        <select class="inputGeneral" id="SecurityQuestion1" style="font-size:20px;">
            <option value="1">
                What is your favorite book?
            </option>
            <option value="2">
                What is your favorite movie?
            </option>
            <option value="3">
                What is your favorite TV show?
            </option>
            <option value="4">
                What is your pet's name?
            </option>
            <option value="5">
                What is your favorite hobby?
            </option>
        </select><br>
        <br>
        <input class="inputGeneral" id="SecurityAnswer1" type="text"><br>
        <br>
        <select class="inputGeneral" id="SecurityQuestion2" style="font-size:20px;">
            <option value="1">
                What is your favorite book?
            </option>
            <option value="2">
                What is your favorite movie?
            </option>
            <option value="3">
                What is your favorite TV show?
            </option>
            <option value="4">
                What is your pet's name?
            </option>
            <option value="5">
                What is your favorite hobby?
            </option>
        </select><br>
        <br>
        <input class="inputGeneral" id="SecurityAnswer2" type="text"><br>
        <br>
        <input class="inputGeneral" type="submit" value="Continue">
    </form>
</body>
</html>

JQuery and AJAX: jQuery和AJAX:

  $(document).arrive("#enrollPhase1", function() {
  // Auto Correct Questions
  $("#SecurityQuestion1").on("change", function() {
      if(this.value === $("#SecurityQuestion2").val()) {
        // Notify that same question will not fly with us
      } else {
        // If something changes and they are no longer the same, remove all errors
      }
  })

  $("#SecurityQuestion2").on("change", function() {
    if(this.value === $("#SecurityQuestion1").val()) {
      // Notify that same question will not fly with us
    } else {
      // If something changes and they are no longer the same, remove all errors
    }
  })

  // Get EnrollPhase1 Form...
  var EnrollPhase1Form = $('#enrollPhase1');

  $(EnrollPhase1Form).submit(function(event) {
    // Catch Browser Submitting Form
    event.preventDefault();

    // Temp Hold Security Question IDs to check for same question
    var SQ1 = $("#SecurityQuestion1").find(":selected").val();
    var SQ2 = $("#SecurityQuestion2").find(":selected").val();

    if(SQ1 === SQ2) {
      // Same question issue 
      return;
    }

    // Temp Hold Security Question Answers to check for same answer
    var SA1 = $("#SecurityAnswer1").val();
    var SA2 = $("#SecurityAnswer2").val();

    if(SA1 === SA2) {
      // Same answer issue
      return;
    }

    // Hide UsernameForm...
    $("#enrollPhase1Container").hide();

    // Error Message Response Removal
    $(".success, .error, .warning, .info").remove();

    // Start animationSpin
    $("#animationSpin").removeClass("hidden");

    // Serialize the form data
    alert(JSON.stringify(EnrollPhase1Form));
    var formData = $(EnrollPhase1Form).serialize();

    // Submit the form using AJAX.
    $.ajax({
        type: $(EnrollPhase1Form).attr('method'),
        url: $(EnrollPhase1Form).attr('action'),
        data: formData,

        statusCode: {
          500: function() {
            // Done animationSpin
            $("#animationSpin").addClass("hidden");

            // Error Message Callback
            $(".status").append("<div class=\"error\"><span class=\"closebtn\" onclick=\"this.parentElement." +
            "style.display='none';\">&times;</span>" + "<h4>Server Returned 500 Error Code</h4>" + "</div>");

            // Show Form Again
            $("#enrollPhase1Container").show();
          }
        }
    })

    .done(function(response) {
        window.setTimeout(function(){
            $("#animationSpin").addClass("hidden");

            if(response == "REFRESH") {
              location.reload();
            } else if(response.startsWith("Error")) {
              // Error Message Adding
              $(".status").append("<div class=\"error\"><span class=\"closebtn\" onclick=\"this.parentElement.style.display='none';\">" +
              "&times;</span>" + response.replace("Error", "") + "</div>");

              // Increase height
              $("#loginContainer").height("70%");

              // Show Form Again
              $("#enrollPhase1Container").show();
            } else {
              // Remove UsernameForm...
              $("#enrollPhase1Container").remove();

              // Decrease height
              $("#loginContainer").height("50%");

              // Set the message text.
              $("#login").append(response);
            }
        }, 1000)
    })
});
});

enrollphase1.php: enrollphase1.php:

// Do we have
var_dump($_POST);

You forgot the name attribute on all your form elements. 您忘记了所有表单元素上的name属性。 They are still required for .serialize (so it can give a post variable its name for the value). .serialize仍然需要.serialize (因此它可以为post变量指定值的名称)。 So adjust your form elements: 因此,调整您的表单元素:

<form action="/core/enrollphase1.php" id="enrollPhase1" method="post" name="enrollPhase1">
    <select .. id="SecurityQuestion1" name="SecurityQuestion1"></select>
    <input  .. id="SecurityAnswer1"   name="SecurityAnswer1" type="text">
    <select .. id="SecurityQuestion2" name="SecurityQuestion2"></select>
    <input  .. id="SecurityAnswer2"   name="SecurityAnswer2" type="text">
    <input .. type="submit" value="Continue">
</form>

Now when you get them from the $_POST array, you should see them as: 现在,当您从$_POST数组中获取它们时,应该将它们显示为:

$_POST['SecurityQuestion1']
$_POST['SecurityAnswer1']
$_POST['SecurityQuestion2']
$_POST['SecurityAnswer2']

As a side note, your usage of selectors in the jquery is a bit, odd. 附带说明一下,您在jquery中使用选择器有点奇怪。 I would suggest you change to the following (for just these lines): 我建议您更改为以下内容(仅针对这些行):

$("#enrollPhase1").submit(function(event) {
    ....
    $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: $(this).serialize(),
    ....

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM