Erstellen von JSON-Objekten aus HTML-Formulardaten

Im Bereich der Webentwicklung ist die nahtlose Übertragung von Daten an Server von entscheidender Bedeutung. Beim Umgang mit HTML-Formularen kann es erforderlich sein, Daten im JSON-Format zu übermitteln. Dieser Artikel befasst sich mit dem optimalen Ansatz, um dies zu erreichen, ohne auf Hindernisse zu stoßen.

Betrachten Sie das folgende HTML-Formular als Beispiel:

  First Name:
  
  Last Name:
  
  

Unser Ziel ist es, die Daten aus diesem Formular in ein JSON-Objekt umzuwandeln und sie bei der Formularübermittlung an den Server zu übertragen.

Zunächst haben Sie möglicherweise eine Lösung mit dem versucht folgender Code:

function submitform(){
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
  var j = {
    "first_name":"binchen",
    "last_name":"heris",
  };
  xhr.send(JSON.stringify(j));
}

Dieser Ansatz greift jedoch aufgrund eines entscheidenden Fehlers zu kurz. Anstatt die Daten aus dem Formular abzurufen, haben Sie manuell ein JSON-Beispielobjekt erstellt. Um dies zu beheben, müssen wir die Formulardaten dynamisch sammeln.

Die Lösung besteht darin, die Leistungsfähigkeit von jQuery zu nutzen, um die Formulardaten als Array zu extrahieren, das wir dann in einen JSON-String konvertieren können:

var formData = JSON.stringify($("myForm").serializeArray());

Diese Codezeile erfasst effektiv alle Daten aus dem Formular und wandelt es in das gewünschte JSON-Format um. Sie können diese JSON-Zeichenfolge dann in Ihrer AJAX-Anfrage verwenden oder, wenn AJAX keine Option ist, sie in einen versteckten Textbereich integrieren und das Formular auf herkömmliche Weise senden.

Außerdem, wenn Sie die Daten als JSON-Zeichenfolge übertragen über ein Standard-HTML-Formular, beachten Sie, dass es auf der Serverseite dekodiert werden muss, um auf die einzelnen Datenpunkte in einem Array-Format zuzugreifen.

Mit diesem Ansatz können Sie dies mühelos tun Senden Sie JSON-Objekte aus Ihren HTML-Formularen und sorgen Sie so für eine nahtlose Datenübertragung und eine effiziente Serverkommunikation.