admin管理员组文章数量:1390239
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
本文标签： javascriptSending form data as JSONBrowser changing ContentTypeStack Overflow
版权声明：本文标题：javascript - Sending form data as JSON - Browser changing Content-Type - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744686177a2619713.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论