CODEWITHSUNDEEP
phpjqueryajaxjson
Sarvar Nishonboyev
Sarvar Nishonboyev

Reputation: 13110

Sending JSON data using ajax issue

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).

Upvotes: 0

Views: 183

Answers (4)

Code_Crash
Code_Crash

Reputation: 754

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);

      }

Upvotes: 3

Neel
Neel

Reputation: 11741

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).

Upvotes: 1

Manwal
Manwal

Reputation: 23836

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);
            }
        });

Upvotes: 0

techfoobar
techfoobar

Reputation: 66693

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,
    ...
});

Upvotes: 1

Related Questions