Wie übertrage ich HTML-Formulardaten als JSON mit Ajax?

JSON-Datenübertragung mithilfe von HTML-Formulardaten

Im Bereich der Webentwicklung besteht häufig die Notwendigkeit, Daten von einem HTML-Formular an einen Server zu übertragen. Während traditionelle Methoden existieren, untersucht dieser Artikel einen alternativen Ansatz: das Senden der Formulardaten als JSON-Objekt.

Die Herausforderung

Angenommen, Sie haben ein HTML-Formular mit Folgendem Struktur:

<code class="html"><form action="myurl" method="POST" name="myForm">
  <label for="first_name">First Name:</label>
  <input type="text" name="first_name" id="fname">
  <label for="last_name">Last Name:</label>
  <input type="text" name="last_name" id="lname">
  <input value="Submit" type="submit" onclick="submitform()">
</form></code>

Ziel ist es, die in dieses Formular eingegebenen Daten als JSON-Objekt zu senden, wenn der Benutzer auf die Schaltfläche „Senden“ klickt.

Anfänglicher Fehler

Einige versuchen möglicherweise, diesen Code zu verwenden:

<code class="javascript">var j = {
  "first_name":"binchen",
  "last_name":"heris",
};
xhr.send(JSON.stringify(j));</code>

Dieser Ansatz schlägt jedoch fehl, da die tatsächlichen Daten nicht aus den Formulareingaben abgerufen werden.

解决方案

Der Schlüssel zur Lösung dieses Problems liegt in der Beschaffung der vollständigen Formulardaten. Dies kann mit dem folgenden Code erreicht werden:

<code class="javascript">var formData = JSON.stringify($("#myForm").serializeArray());</code>

Die Methode serializeArray() wandelt die Formulardaten in ein Array von Schlüssel-Wert-Paaren um. Durch die Konvertierung dieses Arrays in einen JSON-String können wir das gewünschte JSON-Objekt erhalten.

Integration mit Ajax

Um die JSON-Daten mit Ajax zu übertragen, können Sie die verwenden Folgender Code:

<code class="javascript">$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType: "application/json"
});</code>

Wenn ein Benutzer nun das Formular sendet, wird das JSON-Objekt mit den Formulardaten über Ajax an die angegebene Server-URL gesendet.

Dieser Ansatz bietet eine praktische Möglichkeit und effiziente Möglichkeit, HTML-Formulardaten als JSON-Objekt zu senden und so die Vielseitigkeit und Funktionalität Ihrer Webanwendungen zu verbessern.

Das obige ist der detaillierte Inhalt vonWie übertrage ich HTML-Formulardaten als JSON mit Ajax?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!