So senden Sie ein JSON-Objekt mithilfe von HTML-Formulardaten

128

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?

javascript jquery html json forms kstratis
quelle
1
Werfen Sie einen Blick auf $.ajaxund serializein dem jQuery - API.
Rory McCrossan
1
Muss es unbedingt ein JSON-Objekt sein? Welche Struktur sollte das Objekt haben?
Anthony Grist
1
@AnthonyGrist Ja, es muss ein JSON sein, da es an einen ReST-Dienst gerichtet ist.
Kstratis
4
Was bedeutet "scheint nicht zu funktionieren"? Denken Sie daran, wir können Ihren Bildschirm nicht sehen.
Dour High Arch
2
@ Konos5 - REST hat nichts mit JSON zu tun. Es ist nicht erforderlich, dass die Daten in einem bestimmten Format vorliegen.
Danielm

Antworten:

135

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

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

Sie können es später in Ajax verwenden. Oder wenn Sie Ajax nicht verwenden; Legen Sie es in einen versteckten Textbereich und übergeben Sie es an den Server. Wenn diese Daten über normale Formulardaten als JSON-Zeichenfolge ü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"
});
SachinGutte
quelle
4
Sie haben die Frage mit jQuery markiert. Also benutzt du es? mit ist $.ajaxes wirklich einfach, diese Daten weiterzugeben.
SachinGutte
51

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

Wenn Sie wirklich vom Client aus damit 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. Generieren Sie JSON mit JSON.stringify
  4. POST es mit XMLHttpRequest

Sie sollten sich wahrscheinlich besser an application/x-www-form-urlencodedDaten halten und diese auf dem Server verarbeiten als auf JSON. Ihr Formular hat keine komplizierte Hierarchie, die von einer JSON-Datenstruktur profitieren würde.

Update als Antwort auf eine wichtige Neufassung der Frage…

  • Ihr JS hat keinen readystatechangeHandler, daher tun Sie nichts mit der Antwort
  • Sie lösen die JS aus, wenn Sie auf die Schaltfläche "Senden" klicken, ohne das Standardverhalten abzubrechen. Der Browser sendet das Formular (auf normale Weise), sobald die JS-Funktion abgeschlossen ist.
QUentin
quelle
1
OK, wie behebe ich das?
Kstratis
1
@ Quentin: In meinem Fall benötige ich domänenübergreifenden POST ohne Domänenkontrolle.
user2284570
1
@ user2284570 - Wenn Sie eine neue Frage haben, stellen Sie eine.
Quentin
1
Es gibt einen Vorschlag zum Hinzufügen enctype='application/json'zur Formulardefinition, um JSON-Daten zu erstellen. W3.org/TR/html-json-forms
EkriirkE
4
@EkriirkE - Hast du diese Seite gelesen? Es heißt, in einer massiven Schachtel mit einem schwarz-gelben Gefahrenstreifen Vorsicht. Diese Spezifikation wird nicht mehr aktiv gewartet, und die HTML-Arbeitsgruppe beabsichtigt nicht, sie weiter zu pflegen.
Quentin
3

Sie Code ist in Ordnung , aber nie ausgeführt, Ursache ersetzen Taste [type = „submit“] vor nur durch type = button

<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);
tdjprog
quelle
Genau type = "button" ist sehr wichtig. Wenn es nicht verwendet wird, wird es mit URL-Parametern umgeleitet.
Rohit Parte
1

Ich bin spät dran, aber ich muss sagen, für diejenigen, die ein Objekt benötigen und nur HTML verwenden, gibt es einen Weg. In einigen serverseitigen Frameworks wie PHP können Sie den folgenden Code schreiben:

<form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="name[first]" id="fname"></p>

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

        <input value="Submit" type="submit">
    </form>

Wir müssen also den Namen der Eingabe object[property]festlegen, um ein Objekt zu erhalten. Im obigen Beispiel haben wir Daten mit dem folgenden JSON erhalten:

{
"name": {
  "first": "some data",
  "last": "some data"
 }
}
orafaelreis
quelle