Form submit through AJAX with jQuery and show the return of the processing PHP page_问答_开发者

I'm basically just trying to submit a form through AJAX and want to show the return of the processing PHP page. The PHP page just validates the input and shows either the errors that occured, or a thank you message to the user. Normally I wouldn't use ajax for it, but in this case the customers setup requires me to.

As simple as that may sound, I can't get it to work.

The jquery (1.4.2) code I'm using:

$(document).ready(function() {
    $('#subscription开发者_JAVA技巧').submit( function() {
        var inputdata = $('#subscription').serialize();
        alert(inputdata);
        $.post("process_form.php", inputdata, function(data) {alert(data);} );
    });
});

Firebug just shows:

POST process_form - status: aborted

Another curious observation is that the success handler is actually called, but no responseText is displayed. My apache logs show a 304 http message for the process form, after which it shows another line with statuscode 200 for the form, as if it was redirected back there, whether that is normal AJAX behaviour I don't know.

W3C states here:

If the origin of the URL conveyed by the Location header is same origin with the XMLHttpRequest origin and the redirect does not violate infinite loop precautions, transparently follow the redirect while observing the same-origin request event rules. Otherwise, this is a network error.

But I don't think my request violates any of those.

Anyway, long story short: I'm stuck.

Any help would be very much appreciated and off course I'd be happy to supply any further needed information.

Try returning false at the end of your submit handler. I'm not sure of the precise sequence of things that happen, but if you don't return false you won't prevent the form's default action. So, the form will submit the normal way, and XHR will crash into it causing a large explosion.

At a glance, try removing the curly brackets from the $.post() function.

[edit]

$.post("process_form.php", inputdata, function(data) {alert(data);});

According to the jQuery-docs, jQuery.post should be called like this:

$.post("process_form.php", inputdata, function(data) {
    alert(data);
});

If the form has an action-attribute, you probably want to disable the default redirect related to a form submission. To achieve this you can use the following code:

$('#subscription').submit(function(event) {
    event.preventDefault();
    // additional code
});

Damm, beaten to the answer!

The reason why you were getting a "process_form.php" aborted message in Firebug was from your page refreshing itself before the "process_form.php" could reply to the original query, hence it was aborted! If there's no action in the FORM statement, the page assumes a refresh.

For my pennies worth, I try and avoid using jQuery to event handles such as POST and GET, since normally the page then tries a refresh (since no action was declared in the form statement).

I use the following code for the client side, with the PHP returning a formatted XML document.

<body>
 <form id="subscription">
  <input id="1" value="1">
  <input id="2" value="2">
  <input id="3" value="3">
  <input id="4" value="4">
  <input type="button" value="SUBMIT" onclick="submitForm()">
 </form>
 <script type="text/javascript"> 

  $(document).ready(function() {

  });

  function submitForm() {
   $.post("./process_form.php", $('#subscription').serialize(),
    function(xml) {
     alert($("SUCCESS",xml).text());
   }, "xml");
  };
 </script>
</body>

Server side PHP:

<?php
 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
 header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
 header("Cache-Control: no-cache, must-revalidate" );
 header("Pragma: no-cache" );
 header("Content-Type: text/xml; charset=utf-8");

 $XML = '<?xml version="1.0"?>';
 $XML .= "<ROOT>";
 $XML .= "<SUCCESS>1</SUCCESS>";
 $XML .= "</ROOT>";

 echo $XML;
?>

This allows for validation at the server side easily and for the validated answer to be returned easily. (For example: validating against a database, return with SUCCESS=0 and the reason why REASON=Not in database.)