Posthandling mit Ajax, jQuery und PHP

Im heutigen Blog habe ich ein Beispiel für euch, über die
Verwendung von Ajax, jQuery und PHP um einen POST zu handeln.

HTML:

<form id="myForm">
       <label for="input">Eingabe</label>
       <input id="input" name="input" type="text" value="" />

       <input type="submit" value="Senden" />

</form>

JavaScript:

// Variable für req
var req;

// Binden an das Submit-Event des Formulars
$("#myForm").submit(function(event){

       event.preventDefault();

       // Abbrechen von ausstehenden Anfragen
       if (req) {
          req.abort();
       }

       var $form = $(this);

       // Felder selektieren und cachen
       var $inputs = $form.find("input, select, button, textarea");

       // Daten aus Formular serialisieren
       var serializedData = $form.serialize();

       // Inputs für die Dauer eines Ajax Request deaktivieren
       $inputs.prop("disabled", true);

       // Anfrage an form.php schicken
       req = $.ajax({
          url: "/form.php",
          type: "post",
          data: serializedData
       });

       // Callback-Handler für Erfolgsfall
       req.done(function (response, textStatus, jqXHR){
           console.log("Juhu, es hat funktioniert!");
       });

       // Callback-Handler für Fehlerfall
       req.fail(function (jqXHR, textStatus, errorThrown){
         console.error(
           "Folgender Fehler ist aufgetreten: "
           +textStatus, errorThrown
         );
       });

       // Callback-Handler der in jedem Fall aufgerufen wird
       req.always(function () {
            // Inputs reaktivieren
            $inputs.prop("disabled", false);
       });

});

PHP:

Zugriff auf die von Ajax geposteten Werte habt ihr
via der globalen Variable $_POST:
$bar = isset($_POST['bar']) ? $_POST['bar'] : null;