Debugging jQuery AJAX response: what I'm doing wrong

Question

$.ajax({
    type: 'POST',
    url: 'place/add',
    data: {
        lat: lat,
        lng: lng,
        name: name,
        address: address,
        phone: phone,
        review: review,
        category: category
    },
    success: function(data) {
    alert(data);
    alert(data.id);
    // ......
});

The first alert gives: {"id":"2","success":true}

but the second: undefined

Answer 1

You need to specify your anticipated returned data type as JSON:

$.ajax({
    type: 'POST',
    dataType: 'json', // specifies the return type
    url: 'place/add',
    data: {
        lat: lat,
        lng: lng,
        name: name,
        address: address,
        phone: phone,
        review: review,
        category: category
    },
    success: function(data) {
        alert(data);
        alert(data.id);
        // ......
    }
});

Answer 2

You have to specify dataType: 'json' or eval returned data yourself like this var data = eval('(function(){return '+data+'})()');

BTW trust jQuery - use dataType: 'json' if you can.

Answer 3

An especially useful addition, if you run multiple ajax calls is $.ajaxSetup

$.ajaxSetup({
  type: 'post',
  dataType: 'json'
});

Any subsequent ajax calls will use these as the defaults.