Jquery validation plugin does not send POST data

问题

Update 2: I found out what was wrong! There was a 301 redirect in the .htaccess file. I will post it as an answer once I am allowed to (users under 10 rep have to wait 8 hours).

---

Update: I have taken Barmar's suggestion and checked the network tab (a tab I'm not too familiar with) and noticed I am receiving a 301 from handle.php See screenshot. I am going to do some searching and post my results.

---

Original Post: I am using the JQuery validation plugin to validate and send form data via ajax. The problem isn't that the data is being sent, but the form handler is saying there are no elements in the $_POST array. I have tested a few different methods to send ajax, and the data sends, but the form handler does not see any $_POST[] values.

Note: I have to use the JQuery validation plugin so it has to be handled by .validate.submitHandler(). Any $(form).on() won't suffice.

html + js (index.php)

<form action="handle.php" class="sky-form sky-form-modal" id="sky-form-modal" method=
"post" name="sky-form-modal">
  <label class="input">
  <input name="name" placeholder="Name" type=
  "text">
  </label>
  <label class="input"><input name="company" placeholder="Company" type=
   "text">  
  </label>

  <footer>
      <button class="button" type="submit">Send request</button>
      <div class="progress"></div>
  </footer>
</form>

<script>
$("#sky-form-modal").validate({
  submitHandler: function(form) {    
    var $form = $("#sky-form-modal"); //being explicit for testing
    var $inputs = $form.find("input, select, button, textarea");
    var serializedData = $form.serialize();

    request = $.ajax({
      url: "handle.php",
      type: "POST",
      data: serializedData
    });

    console.log('data: ' + serializedData);
    request.done(function(response, textStatus, jqXHR) {
      console.log("Response: " + response);
     });
   },
});
</script>

handle.php:

<?php
    if(isset($_POST['name'])) {
        echo 'we got it';
    } else {
        echo 'name not set';
    }
?>

Okay, so it seems like everything works, check out the console.log after I fill in the username and leave the company blank:

data: name=testtest&company=
Response: name not set

As you can see, serialize works and grabs all the info, but when handled by handle.php it tells me that the $_POST[] is empty. Looping through it on handle.php proves it:

 foreach($_POST as $key=>$value) { 
   echo "$key: $value 
   \n"; 
}

Which doesn't return at all. I have also tried ajaxSubmit() and form.submit() but I get the same exact results.

This one looks right to me, because I have searched and searched stackoverflow and came across that most of the problems with this is including the 'name' attribute on the input tags, which is already done.

Thanks in advance!!

回答1:

My issue was irrelevant to my code and ended being a few declarations in the .htaccess. It was redirecting me from a .php file to a directory (for prettier URLS). Now, this is a common technique so:

if you are working on someone else's project and your URL's aren't standard with a file extension, check the .htaccess!

回答2:

Page.html or .php

<form action="/" id="sky-form-modal" method=
"post" name="sky-form-modal">
  <input name="name" placeholder="Name" type="text">
  <input name="company" placeholder="Company" type="text">  
  <button class="button" type="submit">Send request</button>
</form>

<div id="result"></div>

<script>
var request;

$("#sky-form-modal").submit(function(event){
    // abort any pending request
    if (request) {
        request.abort();
    }
    var $form = $(this);
    var $inputs = $form.find("input, input");
    // serialize the data in the form
    var serializedData = $form.serialize();

    // let's disable the inputs for the duration of the ajax request
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);

    // fire off the request to /form.php
    request = $.ajax({
        url: "handle.php",
        type: "post",
        data: serializedData
    });

    // callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // log a message to the console
        console.log("Hooray, it worked!");
        $("#result").html(response);
    });

    // callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // log the error to the console
        console.error(
            "The following error occured: "+
            textStatus, errorThrown
        );
    });

    // callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // reenable the inputs
        $inputs.prop("disabled", false);
    });

    // prevent default posting of form
    event.preventDefault();
});
</script>

handle.php

<?php

foreach ($_POST as $key => $value) {
        echo "POST Key: '$key', Value: '$value'<br>";
    }

?>

I removed your labels and classes for the simple look of the form.

回答3:

i Guess you missed '(' after validation $("#sky-form-modal").validate { $("#sky-form-modal").validate ({

来源：https://stackoverflow.com/questions/24071535/jquery-validation-plugin-does-not-send-post-data