Sending JSON data using ajax issue - php

Question

I have the following code:
var arr = {City:'Moscow', Age:25};
$.ajax({
url: "<? echo $this->createUrl('cities/index');?>",
type: "POST",
data: JSON.stringify(arr),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function(data){
alert(data);
}
});
The result is null. In the PHP side I have:
echo json_encode($_POST);
and
print_r($_POST);
But both are giving empty results (checked Firebug also).

Answer 1

You can also set the dataType in Ajax to specify the content type as follows.
var city='city name';
var age=10;
$.ajax({
url: "<? echo $this->createUrl('cities/index');?>",
type: "POST",
data:"City="+city+"&Age="+age,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function(data){
alert(data);
}
});
and in cities/index.php you can get this data by follows
if($_POST){
$city=$_POST['City'];
$age=$_POST['Age'];
// and do with $city and $age what you want.
//for return anything thing to `json` use follows we pass $age back to ajax
echo json_encode($age);
}

Answer 2

I guess you don't need to stringyfy the data because data should be PlainObject or String but in your case you can simply write like below
var arr = {City:'Moscow', Age:25};
$.ajax({
url: "<? echo $this->createUrl('cities/index');?>",
type: "POST",
data: arr,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function(data){
alert(data);
}
});
as documented in jquery official site https://api.jquery.com/jQuery.ajax/
data
Type: PlainObject or String
Data 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 based on the value of the traditional setting
(described below).

Answer 3

The data option passed to $.ajax() must be either a simple object, that jQuery will transform into a string of the formatkey1=value1&key2=value2.. OR it should be a string of the form key1=value1&key2=value2...
In your case, it can be solved by passing the object itself and letting jQuery do the query string formatting:
$.ajax({
...
data: arr,
...
});

Answer 4

try this
var arr = {City:'Moscow', Age:25};
$.ajax({
url: "<? echo $this->createUrl('cities/index');?>",
type: "POST",
data: arr,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function(data){
alert(data);
}
});