web-dev-qa-db-fra.com

POST données au format JSON

J'ai certaines données que je dois convertir au format JSON, puis POST avec une fonction 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="[email protected]" />
</form>
</body>

C'est ce à quoi ressemble le message maintenant. J'ai besoin de soumettre les valeurs au format JSON et faire le POST avec JavaScript.

javascriptjsonpostxmlhttprequest
77
Randy Smith

Je ne sais pas si vous voulez 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
  };
};
144
J. K.

Voici un exemple utilisant 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 fonction jQuery serializeArray crée un objet Javascript avec les valeurs de formulaire. Ensuite, vous pouvez utiliser JSON.stringify pour le convertir en chaîne, si nécessaire. Et vous pouvez également retirer votre corps en surcharge.

29
Josh Stodola

Un autre exemple est disponible ici:

Envoi d'un JSON au serveur et extraction d'un JSON en retour, sans JQuery

Ce qui est identique à jans answer, mais vérifie également la réponse des serveurs en définissant un rappel onreadystatechange sur XMLHttpRequest. 

3
andrew pate

En utilisant le nouvel objet FormData (et quelques autres éléments ES6), vous pouvez utiliser cette méthode pour transformer tout votre formulaire en json:

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

et puis juste xhr.send(JSON.stringify(data)); comme dans la réponse originale de Jan.

0
Felk