how to post ajax data and not standard form data
Question
I want to post a simple input field as json data to a webserver that i created. Now i have done this:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function(event){
$('#postit').submit(function(){
$.ajax({
type: 'POST',
url: 'http://ihavearealurltoaserverhere',
contentType: 'application/json',
dataType: 'jsonp',
data: JSON.stringify($('#postit').serializeObject()),
complete: function() {
//called when complete
alert("DOET HET");
},
success: function(data) {
//called when successful
alert("success DOET HET " + data);
},
error: function() {
alert("DOET HET niet");
//called when there is an error
}
});
});
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
});
</script>
</head>
<body>
<form id="postit">
<input name='name' value='asd'>
<input type="submit" value="Submit">
</form>
<pre id="result">moi
</pre>
</body>
</html>
If i now click on submit then in my webservice i receive 2 respones. In one i get a POST(checked with wireshark) where i got the normal form data(if i check with CGI) i see request_method = name="asd", and secondly for the AJAX post i receive a GET(as i can see in wireshark) with the restants of my URL so for example if i post to www.bla.com/test then i get test&{name:%asd} and in CGI i see this in a QUERY_STRING
Why does my ajax not just send it as normal post?
Anwser: make use of e.preventDefault(); to stop the form from submitting. and use $.post('http://example', JSON.stringify($('#postit').serializeObject())); instead of ajax because, if you use ajax with dataType:json from another domain then you get No 'Access-Control-Allow-Origin' and if you use jsonp then it actually won't post but use GET, see answer below for more details
1 answers
solution1
2 ACCPTED 2015-08-27 12:02:40
You need to add e.preventDefault() to the top of your function, to stop the form from submitting.
$('#postit').submit(function (e) {
e.preventDefault();
$.ajax({
type : 'POST',
url : 'http://ihavearealurltoaserverhere',
contentType : 'application/json',
dataType : 'jsonp',
data : JSON.stringify($('#postit').serializeObject()),
complete : function () {
//called when complete
alert("DOET HET");
},
success : function (data) {
//called when successful
alert("success DOET HET " + data);
},
error : function () {
alert("DOET HET niet");
//called when there is an error
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.