wake-up-neo.com

So senden Sie ein JSON-Objekt mit HTML-Formulardaten

Also habe ich dieses HTML-Formular:

<html>
<head><title>test</title></head>
<body>
    <form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="lname"></p>

        <input value="Submit" type="submit" onclick="submitform()">
    </form>
</body>
</html>

Was wäre der einfachste Weg, um die Daten dieses Formulars als JSON-Objekt an meinen Server zu senden, wenn ein Benutzer auf Senden klickt?

UPDATE: Ich bin so weit gegangen, aber es scheint nicht zu funktionieren:

<script type="text/javascript">
    function submitform(){
        alert("Sending Json");
        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));

Was mache ich falsch?

javascriptjqueryhtmljsonforms
108
kstratis

Holen Sie sich vollständige Formulardaten als Array und json stringifizieren Sie sie.

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

Sie können es später in Ajax verwenden. Oder wenn Sie kein Ajax verwenden; lege es in ein verstecktes Textfeld und übergebe es an den Server. Wenn diese Daten als JSON-Zeichenfolge über normale Formulardaten übergeben werden, müssen Sie sie mit JSON_DECODE dekodieren. Sie erhalten dann alle Daten in einem Array.

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});
117
SachinGutte

HTML bietet keine Möglichkeit, JSON aus Formulardaten zu generieren.

Wenn Sie wirklich mit dem Client umgehen möchten, müssen Sie JavaScript verwenden, um:

  1. sammeln Sie Ihre Daten aus dem Formular über DOM
  2. organisieren Sie es in einem Objekt oder Array
  3. generiere JSON mit JSON.stringify
  4. POST es mit XMLHttpRequest

Es ist wahrscheinlich besser, sich an application/x-www-form-urlencoded - Daten zu halten und diese auf dem Server statt auf JSON zu verarbeiten. Ihr Formular hat keine komplizierte Hierarchie, die von einer JSON-Datenstruktur profitieren würde.

Update als Antwort auf eine umfassende Überarbeitung der Frage…

  • Ihr JS hat keinen readystatechange -Handler, Sie tun also nichts mit der Antwort
  • Sie lösen das JS aus, wenn Sie auf die Senden-Schaltfläche klicken, ohne das Standardverhalten aufzuheben. Der Browser wird das Formular (in der üblichen Weise) senden, sobald die JS-Funktion abgeschlossen ist.
43
Quentin

ihr Code ist in Ordnung, wird aber nie ausgeführt, da der Submit-Button [type = "submit"] einfach durch type = button ersetzt wird

<input value="Submit" type="button" onclick="submitform()">

in Ihrem Skript; form ist nicht deklariert.

let form = document.forms[0];
xhr.open(form.method, form.action, true);
1
tdjprog