wake-up-neo.net

POST Daten im JSON-Format

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

<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 übergeben und die POST mit JavaScript auszuführen.

javascriptjsonpostxmlhttprequest
77
Randy Smith

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
  };
};
144
J. K.

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. Dann können Sie JSON.stringify verwenden, um dies bei Bedarf in einen String umzuwandeln. Und Sie können auch Ihren Körper entfernen.

29
Josh Stodola

Ein weiteres Beispiel ist hier verfügbar:

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

Dies ist dasselbe wie jans answer, überprüft jedoch auch die Antwort des Servers, indem ein onreadystatechange-Callback für XMLHttpRequest festgelegt wird. 

3
andrew pate

Mit dem neuen Objekt FormData (und einigen anderen ES6-Elementen) können Sie das gesamte Formular in json umwandeln:

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

und dann einfach xhr.send(JSON.stringify(data)); wie in Jan's ursprünglicher Antwort.

0
Felk