Données POST au format JSON

86

J'ai des données que j'ai besoin de convertir au format JSON, puis de les POSTER 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>

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

javascript json post xmlhttprequest Damjan Pavlica
la source
Quelle structure devraient avoir les données JSON? Juste {"firstName":"harry", "lastName":"tester", "toEmail":"[email protected]"}?
Gumbo
1
Oui, les données seraient dans le format que vous avez décrit! merci pour les réponses!

Réponses:

172

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
  };
};
JK
la source
62
Je pense que c'est un bon exemple clair et concis de la façon de faire le travail en 20 lignes de code, sans 100K de cadre.
spidee
1
@IanKuca Merci :) Je me demandais si nous pouvons envoyer les données json sans urlencode les données? Je veux dire, je veux envoyer des données comme "cmd":"<img src=0 onerror=alert(1)>"pas%3Cimg+src%3D0+onerror%3Dalert%281%29%3E
tli2020
2
@liweijian Vous devriez aller avec n'importe quel JSON.stringifyretour.
JK
2
@IanKuca Il semble que les données de publication aient été encodées par html formnot JSON.stringify.
tli2020
@liweijian vous devez d'abord décoder les valeurs du formulaire si c'est le cas
Kevin Peno
28

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 convertir cela en une chaîne, si nécessaire. Et vous pouvez également supprimer votre corps sous charge.

Josh Stodola
la source
2
Josh, l'exemple sur jQuery montre le contraire: ressemble plus à une chaîne de requête standard qu'à JSON.
Sampson
4
Vous avez raison. J'ai mis à jour la réponse en conséquence. Merci!
Josh Stodola
7
Ceci est un bon exemple, mais selon le titre, cela devrait être effectué en utilisant javascript, pas une bibliothèque javascript (comme jQuery dans ce cas)
Juan Carlos Alpizar Chinchilla
4
Vous êtes bien sûr les bienvenus pour le faire à la dure. Tout le monde utilise jQuery.
PaulMurrayCbr
9
La question demande comment POSTER des données en utilisant javascript , pas la bibliothèque jquery. Cela répond à la mauvaise question.
Blair Anderson
1

En utilisant le nouvel objet FormData (et d'autres éléments ES6), vous pouvez le faire 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 ensuite xhr.send(JSON.stringify(data));comme dans la réponse originale de Jan.

Felk
la source
Cela ne fonctionnera pas. Un objet FormData n'est pas utilement lié à JSON.
Quentin