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="testtest@test.com" />
</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.

— Damjan Pavlica
quelle

Welche Struktur sollten die JSON-Daten haben? Nur {"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}?

— Gumbo

1

Ja, die Daten haben das von Ihnen beschriebene Format! danke für die 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

3

Ein weiteres Beispiel finden Sie hier:

Senden eines JSON an den Server und Abrufen eines JSON im Gegenzug ohne JQuery

Dies entspricht der Antwort von jans, überprüft jedoch auch die Antwort des Servers, indem ein Rückruf für onreadystatechange für XMLHttpRequest festgelegt wird.

— Andrew Pate
quelle

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