Sending JSON data using ajax issue

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

Remove `JSON.stringify` – Adrian Preuss Mar 27 '14 at 05:25 — Adrian Preuss, Mar 27 '14 at 05:25

score 3 · Answer 1 · answered Mar 27 '14 at 05:49

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

      }

score 1 · Answer 2 · answered Mar 27 '14 at 05:25

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

Neel · Accepted Answer · 2014-03-27T05:31:49.437

1

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

edited Mar 27 '14 at 05:31

answered Mar 27 '14 at 05:26

Neel

11,625
3
43
61

I have one more question. I replaced object to array, var arr= [1, 2, 3]; ... and .. data: JSON.stringify(arr).. but it is not sending, I tried without stringfy also. – Sarvar Nishonboyev Mar 27 '14 at 05:54
1

check this out it might help you http://stackoverflow.com/questions/8890524/pass-array-to-ajax-request-in-ajax @SarvarNishonboyev http://stackoverflow.com/questions/11455000/pass-array-through-jquery-ajax-request – Neel Mar 27 '14 at 05:57
I got it, it helped so much. great! – Sarvar Nishonboyev Mar 27 '14 at 06:04

score 0 · Answer 4 · answered Mar 27 '14 at 05:26

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

Sending JSON data using ajax issue

4 Answers4