#17: POSTing mit Ajax

Wir haben im letzten Video über GET gesprochen, aber POST nicht genug Aufmerksamkeit geschenkt. Deshalb dachte ich, wir machen das hier. Der große Unterschied bei POST ist, dass Sie fast immer Daten mit der Anfrage übermitteln müssen. Diese Daten können viele Formen annehmen, aber es kann auch einfach ein Objekt sein, das Sie gerade 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 ziemlich alles sein (einschließlich einer Zeichenkette). Es liegt an Ihnen, sie so zu übermitteln, dass sie für Ihr Backend nützlich sind.

Zurück zu unserem Formularbeispiel aus dem letzten Video, was ist, wenn Sie alle Daten aus dem gesamten Formular übermitteln möchten? Sie möchten auch nicht, dass Sie das JavaScript aktualisieren müssen, wenn sich das Formular ändert. jQuery macht das einfach mit seiner serialize() Methode. Rufen Sie sie einfach auf dem Formularelement selbst auf

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

Dies durchsucht das gesamte Formular und erstellt eine Abfragezeichenkette aus jedem benannten Eingabefeld im Formular. Dann können Sie dies als Daten verwenden, die Sie übergeben, wenn Sie $.post().

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

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