# 17: POST mit Ajax - CSS-Tricks

Anonim

Wir haben im letzten Video über GET gesprochen, aber POST nicht genug Aufmerksamkeit geschenkt. Also dachte ich, wir würden das hier machen. Der große Unterschied zu POST besteht darin, dass Sie fast immer Daten mit der Anfrage weitergeben müssen. Diese Daten können viele Formen annehmen, aber es kann sich nur um ein Objekt handeln, das Sie in der Nähe haben. Die Syntax ist auch einfach:

$.post( "/data/process.php", ( name: "Susan", job: "Writer" ) function(data, textStatus, jqXHR) ( // success ) );

Beachten Sie den zweiten Parameter, der ein Objekt (im Wesentlichen JSON) von Daten ist. Diese Daten können so gut wie alles sein (einschließlich einer Zeichenfolge). Es liegt an Ihnen, es so weiterzugeben, dass es für Ihr Backend nützlich ist.

Zurück zu unserem Formularbeispiel aus dem letzten Video. Was wäre, wenn Sie alle Daten aus dem gesamten Formular weitergeben möchten? Sie wollten auch nicht das JavaScript aktualisieren müssen, wenn sich das Formular änderte. jQuery macht dies mit seiner serialize () -Methode einfach. Rufen Sie es einfach im Formularelement selbst auf:

$("#my-form").serialize();

Dadurch wird das gesamte Formular durchsucht und aus jeder benannten Eingabe im Formular eine Abfragezeichenfolge erstellt. Dann können Sie dies als Daten verwenden, die Sie beim $ .post () übergeben.

$("#my-form").on("submit", function() ( $.post( "/", $("#my-form").serialize(), function(data, textStatus, jqXHR) ( console.log("success"); ) ); ));

Siehe den Pen CtoEg von Chris Coyier (@chriscoyier) auf CodePen