Dati POST in formato JSON

87

Ho alcuni dati che devo convertire in formato JSON e poi POST con una funzione JavaScript.

<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>

Questo è l'aspetto attuale del post. Ho bisogno che invii i valori in formato JSON e esegua il POST con JavaScript.

— Damjan Pavlica
fonte

Quale struttura dovrebbero avere i dati JSON? Solo {"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}?

— Gumbo

1

Sì, i dati sarebbero nel formato che hai descritto! grazie per le risposte!

173

Non sono sicuro se vuoi jQuery.

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
fonte

62

Penso che questo sia un esempio buono, pulito e conciso di come portare a termine il lavoro in 20 righe di codice, senza 100K di framework.

— spidee

1

@IanKuca Grazie :) Mi chiedevo se possiamo inviare i dati json senza urlencode i dati? Voglio dire, voglio inviare dati come "cmd":"<img src=0 onerror=alert(1)>"no%3Cimg+src%3D0+onerror%3Dalert%281%29%3E

— tli2020

2

@liweijian Dovresti accettare qualunque cosa JSON.stringifyritorni.

— JK

2

@IanKuca Sembra che i dati del post siano stati codificati da html formno JSON.stringify.

— tli2020

@liweijian dovreste prima urldecodificare i valori del modulo se questo è il caso

— Kevin Peno

28

Ecco un esempio usando 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>

La funzione jQuery serializeArray crea un oggetto Javascript con i valori del modulo. Quindi puoi utilizzare JSON.stringify per convertirlo in una stringa, se necessario. E puoi anche rimuovere il carico del tuo corpo.

— Josh Stodola
fonte

2

Josh, l'esempio su jQuery mostra il contrario: assomiglia più a una stringa di query standard che a JSON.

— Sampson

4

Ragazzi, avete ragione. Ho aggiornato la risposta di conseguenza. Grazie!

— Josh Stodola

7

Questo è un buon esempio, tuttavia secondo il titolo questo dovrebbe essere eseguito utilizzando javascript, non una libreria javascript (come jQuery in questo caso)

— Juan Carlos Alpizar Chinchilla

4

Naturalmente, sei il benvenuto a farlo nel modo più duro. Tutti gli altri usano jQuery.

— PaulMurrayCbr

9

La domanda chiede come eseguire il POST dei dati utilizzando javascript , non la libreria jquery. Questo risponde alla domanda sbagliata.

— Blair Anderson

3

Un altro esempio è disponibile qui:

Invio di un JSON al server e recupero di un JSON in cambio, senza JQuery

Che è lo stesso di jans answer, ma controlla anche la risposta del server impostando un callback onreadystatechange su XMLHttpRequest.

— andrew pate
fonte

2

Usando il nuovo oggetto FormData (e altre cose ES6), puoi farlo per trasformare l'intero modulo in JSON:

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

e poi proprio xhr.send(JSON.stringify(data));come nella risposta originale di Jan.

— Felk
fonte

Non funzionerà. Gli oggetti FormData non si stringono in modo utile in JSON.

— Quentin