jQuery: How to stop AJAX function escaping JSON string used to POST data
I need to serialize all inputs from a form into a JSON string.
With the help of this post, I can successfully create a valid string as below:{"input01":"value01","input02":"value02","input03":"value03"}
However, when I try to use the string to POST data using jQuery's Ajax function, it seems to add backslashes to the string, resulting in the JSON string being sent using GET rather than POST.
The loaded PHP page returns a $_GET array of:
[{\"input01\":\"value01\",\"input02\":\"value02\",\"i开发者_运维问答nput03\":\"value03\"}] =>
I have tested the JSON string using alert() to confirm the structure is correct before being used in the AJAX function.
My code is as follows:
var dataJSON = $.toJSON($('#form').serializeObject());
alert(dataJSON);
$.ajax({
type: "POST",
url: "ajax.php",
data: 'Query01=01&Query02=02',
dataType: 'json',
success: function(data){
if (data==1){
$('#wrap').load('ajax.php',dataJSON);
}
}
});
This is the default behaviour of $.ajax(). You can change it by setting the processData option to false. See $.ajax() options.
data Object, StringData to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key i.e. {foo:["bar1", "bar2"]} becomes '&foo=bar1&foo=bar2'.
and
processData Boolean Default: trueBy default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send DOMDocuments, or other non-processed data, set this option to false.
I did it so that it works with stripslashes on the php side.
Something like this:
$data = json_decode(stripslashes($_POST['json_data']));
Be sure that you
echo $_GET['varwithurl']
not
echo json_encode($_GET['varwithurl'])
as many php web examples do.
I send data with url with $.ajax() and don't see unwanted backslashes in php script.
After scouring Google and the jQuery site, i've come to the personal conclusion that the $.load function will convert any variable passed to it as a querystring (As my original problem above outlined).
If you wish to pass a JSON string through it, it has to be manually typed.
To get around this, I used the low level $.ajax function instead.
An advantage of using this method meant I could also send POST data using the standard .serialize() function rather than having to convert my form data into JSON.
My final code:
var formData = $('#form').serialize();
$.ajax({
type: "POST",
url: "ajax.php",
data: 'Query01=01&Query02=02',
dataType: 'json',
success: function(data){
if (data==1){
$.ajax({
type: "POST",
url: "ajax.php",
data: formData,
success: function(html){
$("#wrap").replaceWith(html);
}
});
}
}
});
If anyone else has a solution, please comment.
<html>
<head>
<script src="resources/jquery-2.1.0.js"></script>
<script src="resources/jquery.serializejson.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#simplepost").click(function(e){
var MyForm = $("#appForm").serializeJSON();
console.log(MyForm);
$.ajax(
{
url: "rest/emp/create",
type: "POST",
data: JSON.stringify(MyForm),
contentType: "application/json; charset=utf-8",
dataType: "json",
success:function(maindta){
alert(maindta);
},
error: function(jqXHR, testStatus, errorThrown){
alert(errorThrown);
}
});
e.preventDefault(); //STOP default action
});
});
</script>
<h2>Hello World!</h2>
<form id="appForm" method="POST">
EmployeeID:<input type="text" name='id' value="" />
Employee Name:<input type="text" name="name" value=""/>
<br>
<input type="button" value="Submit" id="simplepost" />
</form>
</body>
</html>
加载中,请稍侯......
精彩评论