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.
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
};
};
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.
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.
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.