I have some data that I need to convert to JSON format and then POST it with a JavaScript function.
<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>
This is the way the post looks now. I need it submit the values in JSON format and do the POST with JavaScript.
Damjan Pavlica
34.5k10 gold badges76 silver badges80 bronze badges
asked Aug 10, 2009 at 16:45
Randy SmithRandy Smith
3 Answers 3
Not sure if you want 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
};
};
answered Oct 23, 2012 at 19:55
10 Comments
spidee
I think this is a good, clean, concise example of how to get the job done in 20 lines of code, without 100K of framework.
alwaysday1
@IanKuca Thanks:) I was wondering if we can send the json data without urlencode the data? I mean I want to send data like
"cmd":"<img src=0 onerror=alert(1)>" not %3Cimg+src%3D0+onerror%3Dalert%281%29%3EJ. K.
@liweijian You should go with whatever
JSON.stringify returns.alwaysday1
@IanKuca It seems that the post data was encoded by
html form not JSON.stringify.Kevin Peno
@liweijian you'd need to urldecode the form values first if that's the case
|
Here is an example using 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>
The jQuery serializeArray function creates a Javascript object with the form values. Then you can use JSON.stringify to convert that into a string, if needed. And you can remove your body onload, too.
jondavidjohn
62.5k21 gold badges120 silver badges159 bronze badges
answered Aug 10, 2009 at 16:58
9 Comments
Sampson
Josh, the example on jQuery shows otherwise: Looks more like a standard query-string than like JSON.
Josh Stodola
You guys are right. I've updated the answer accordingly. Thanks!
Juan Carlos Alpizar Chinchilla
This is a good example, however according the title this should be performed using javascript, not a javascript library (like jQuery in this case)
PaulMurrayCbr
You are, of course, welcome to do it the hard way. Everyone else uses jQuery.
Blair Anderson
The question asks how to POST data using javascript, not the jquery library. This answers the wrong question.
|
Using the new FormData object (and other ES6 stuff), you can do this to turn your entire form into JSON:
let data = {};
let formdata = new FormData(theform);
for (let tuple of formdata.entries()) data[tuple[0]] = tuple[1];
and then just xhr.send(JSON.stringify(data)); like in Jan's original answer.
c-x-berger
1,07114 silver badges35 bronze badges
answered Feb 22, 2017 at 19:13
1 Comment
Quentin
That won't work. A FormData objects do not usefully stringify to JSON.
lang-js
{"firstName":"harry", "lastName":"tester", "toEmail":"[email protected]"}?