I'm trying to create an HTML page that can submit the form data to the server in the form of JSON. I consulted the answers to this question and am using the following code to do this:
<head>
<title>Test</title>
<script type="text/javascript" src=".3.2/jquery.min.js"></script>
<script type="text/javascript" src=".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);
$.ajax({
type: "POST",
data: dat,
success: function(){},
dataType: "json",
contentType : "application/json"
});
});
</script>
</head>
<body onload="javascript:document.myform.submit()">
<form action="/" method="post" name="myform">
<input name="firstName" value="harry" />
<input name="lastName" value="tester" />
<input name="toEmail" value="[email protected]" />
</form>
However, if I intercept the request using Burp proxy tool, I can see that for some reason, the Content-Type bees application/x-www-form-urlencoded as soon as the request leaves the browser. Here's a screenshot of the request:
I would like to know why is this happening with the request? Why is the browser changing the Content-Type in the request? Is there a better way to do this?
PS: I've tried this without jQuery (using XHR as explained here).
I'm trying to create an HTML page that can submit the form data to the server in the form of JSON. I consulted the answers to this question and am using the following code to do this:
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.json/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);
$.ajax({
type: "POST",
data: dat,
success: function(){},
dataType: "json",
contentType : "application/json"
});
});
</script>
</head>
<body onload="javascript:document.myform.submit()">
<form action="http://www.foo./" method="post" name="myform">
<input name="firstName" value="harry" />
<input name="lastName" value="tester" />
<input name="toEmail" value="[email protected]" />
</form>
However, if I intercept the request using Burp proxy tool, I can see that for some reason, the Content-Type bees application/x-www-form-urlencoded as soon as the request leaves the browser. Here's a screenshot of the request:
I would like to know why is this happening with the request? Why is the browser changing the Content-Type in the request? Is there a better way to do this?
PS: I've tried this without jQuery (using XHR as explained here).
Share Improve this question edited May 23, 2017 at 10:30 CommunityBot 11 silver badge asked Jul 10, 2014 at 18:18 Rahil AroraRahil Arora 3,6743 gold badges27 silver badges44 bronze badges2 Answers
Reset to default 3Your jQuery $.ajax request has no URL specified, so it is just hitting your own website and doing nothing. Meanwhile the onload="javascript:document.myform.submit()" property in your HTML is using the browser's regular form submission, which is in fact application/x-www-form-urlencoded.
What you probably want to do is get rid of that statement and use jQuery's .submit to handle the form submission. You also want to specify the URL in the jQuery AJAX request.
Try something like this:
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.json/json2.js"></script>
<script type="text/javascript">
$('#myform').submit(function() {
var frm = $(this);
var dat = JSON.stringify(frm.serializeArray());
alert("I am about to POST this:\n\n" + dat);
$.ajax({
type: "POST",
url: "http://www.foo./",
data: dat,
success: function(){},
dataType: "json",
contentType : "application/json"
});
});
</script>
</head>
<body>
<form id="myform">
<input name="firstName" value="harry" />
<input name="lastName" value="tester" />
<input name="toEmail" value="[email protected]" />
</form>
</body>
Also you are stringifying an array not an object. Below is what I would do for this:
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//var frm = $(document.myform);
//var dat = JSON.stringify(frm.serializeArray());
var dat = {
firstName: $('#firstName').val(),
lastName: $('#lastName').val(),
email: $('#email').val()
}
$('#myform').submit(function(e) {
$.ajax({
datatype : "json",
contentType: "application/json; charset=utf-8",
type: "POST",
url: '/local-url-to-controller.php',
data: JSON.stringify(dat),
success: function() {},
error: function() {},
});
// Stops browser refresh
e.preventDefault();
});
// Submit on document ready
$('#myform').submit();
});
</script>
</head>
<body>
<form name="myform" id="myform">
<input name="firstName" value="harry" id="firstName" />
<input name="lastName" value="tester" id="lastName" />
<input name="toEmail" value="[email protected]" id="email" />
</form>
</body>
</html>
If you are set on using serialized form data, try something like this: Convert form data to JavaScript object with jQuery