为什么这些对象属性未定义？

Question

I'm trying to access the properties of an object returned from my php script using json_encode like so:

php

echo json_encode(array(
  'person_id' => $personID,
  'job_id' => $jobID)
);

JS

$.ajax({
  url: url,
  cache: false,
  type: "POST"
}).done(function(sData){
  console.log(sData);
  console.log(sData.job_id);
  console.log(sData.person_id);
});

Output:

{"person_id":1,"job_id":1}
undefined
undefined

What's going on here? Why can't I access these properties?

UPDATE:

For any future visitors, this is a mistake I've made MANY, MANY times before (leaving out dataType) and will most certainly make again.

It can be especially confusing because when you examine your server response in Chrome Dev Tools, it is automatically parsed as a JSON object (in the PREVIEW tab).

It's nice that Chrome does this, so that you can easily inspect your response data, however the same is not true for your javascript code, you WILL NEED to declare the proper dataType of the response so that your code can interpret the data as an object and not a string.

Answer 1

$.ajax doesn't evaluate the response as JSON by default. you have to pass dataType: 'json'

This should do it

$.ajax({
    url: url,
    cache: false,
    type: "POST",
    dataType: 'json'
}).done(function(sData){
        console.log(sData);
        console.log(sData.job_id);
        console.log(sData.person_id);
});