POST-Daten im JSON-Format

86

Ich habe einige Daten, die ich in das JSON-Format konvertieren und dann mit einer JavaScript-Funktion POSTEN muss.

<body onload="javascript:document.myform.submit()">
<form action="https://www.test.net/Services/RegistrationService.svc/InviteNewContact" method="post" name="myform">
  <input name="firstName" value="harry" />
  <input name="lastName" value="tester" />
  <input name="toEmail" value="[email protected]" />
</form>
</body>

So sieht der Beitrag jetzt aus. Ich brauche es, um die Werte im JSON-Format zu senden und den POST mit JavaScript durchzuführen.

javascript json post xmlhttprequest Damjan Pavlica
quelle
Welche Struktur sollten die JSON-Daten haben? Nur {"firstName":"harry", "lastName":"tester", "toEmail":"[email protected]"}?
Gumbo
1
Ja, die Daten haben das von Ihnen beschriebene Format! danke für die antworten!

Antworten:

170

Nicht sicher, ob Sie jQuery möchten.

var form;

form.onsubmit = function (e) {
  // stop the regular form submission
  e.preventDefault();

  // collect the form data while iterating over the inputs
  var data = {};
  for (var i = 0, ii = form.length; i < ii; ++i) {
    var input = form[i];
    if (input.name) {
      data[input.name] = input.value;
    }
  }

  // construct an HTTP request
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

  // send the collected data as JSON
  xhr.send(JSON.stringify(data));

  xhr.onloadend = function () {
    // done
  };
};
JK
quelle
62
Ich denke, dies ist ein gutes, sauberes und präzises Beispiel dafür, wie die Arbeit in 20 Codezeilen ohne 100.000 Framework erledigt werden kann.
Spidee
1
@IanKuca Danke :) Ich habe mich gefragt, ob wir die JSON-Daten senden können, ohne die Daten mit Urlencode zu versehen. Ich meine, ich möchte Daten wie "cmd":"<img src=0 onerror=alert(1)>"nicht senden%3Cimg+src%3D0+onerror%3Dalert%281%29%3E
tli2020
2
@liweijian Du solltest mit was auch immer JSON.stringifyzurück geht.
JK
2
@ IanKuca Es scheint, dass die Post-Daten von html formnicht codiert wurden JSON.stringify.
tli2020
@liweijian Sie müssten zuerst die Formularwerte urldecode, wenn das der Fall ist
Kevin Peno
28

Hier ist ein Beispiel mit jQuery ...

 <head>
   <title>Test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.json.org/json2.js"></script>
   <script type="text/javascript">
     $(function() {
       var frm = $(document.myform);
       var dat = JSON.stringify(frm.serializeArray());

       alert("I am about to POST this:\n\n" + dat);

       $.post(
         frm.attr("action"),
         dat,
         function(data) {
           alert("Response: " + data);
         }
       );
     });
   </script>
</head>

Die Funktion jQuery serializeArray erstellt ein Javascript-Objekt mit den Formularwerten. Anschließend können Sie JSON.stringify verwenden , um dies bei Bedarf in einen String zu konvertieren. Und Sie können auch Ihre Körperlast entfernen.

Josh Stodola
quelle
2
Josh, das Beispiel in jQuery zeigt etwas anderes: Sieht eher aus wie eine Standard-Abfragezeichenfolge als wie JSON.
Sampson
4
Ihr habt recht. Ich habe die Antwort entsprechend aktualisiert. Vielen Dank!
Josh Stodola
7
Dies ist ein gutes Beispiel, aber laut Titel sollte dies mit Javascript durchgeführt werden, nicht mit einer Javascript-Bibliothek (wie in diesem Fall jQuery)
Juan Carlos Alpizar Chinchilla
4
Sie können es natürlich gerne auf die harte Tour machen. Alle anderen verwenden jQuery.
PaulMurrayCbr
9
In der Frage wird gefragt, wie Daten mit Javascript und nicht mit der JQuery-Bibliothek veröffentlicht werden sollen. Dies beantwortet die falsche Frage.
Blair Anderson
1

Mit dem neuen FormData- Objekt (und anderen ES6- Elementen ) können Sie dies tun, um Ihr gesamtes Formular in JSON umzuwandeln :

let data = {};
let formdata = new FormData(theform);
for (let tuple of formdata.entries()) data[tuple[0]] = tuple[1];

und dann genau xhr.send(JSON.stringify(data));wie in Jans ursprünglicher Antwort.

Felk
quelle
Das wird nicht funktionieren. FormData-Objekte werden nicht sinnvoll mit JSON verknüpft.
Quentin