I'm having trouble getting a response from my php jquery / json / ajax. I keep bining all these different tutorials together but I still can't seem to pull it all together since no one tutorial follow what I'm trying to do.

Right now I'm trying to pass two arrays (since there's no easy way to pass associative arrays) to my jquery ajax function and just alert it out. Here's my code:

PHP

$names = array('john doe', 'jane doe');
$ids = array('123', '223');

$data['names'] = $names;
$data['ids'] = $ids;

echo json_encode($data);

Jquery

function getList(){
    $.ajax({  
        type: "GET", 
        url: 'test.php', 
        data: "",  
        plete: function(data){ 
            var test = jQuery.parseJSON(data);
            alert(test.names[0]);
            alert("here");
        }
    },
        "json");
}
getList();

In my html file all I'm really calling is my javascript file for debugging purposes. I know i'm returning an object but I'm getting an error with null values in my names section, and i'm not sure why. What am I missing?

My PHP file returns

{"names":["john doe","jane doe"],"ids":["123","223"]}

It seems to be just ending here Uncaught TypeError: Cannot read property '0' of undefined so my sub0 is killing me.

I'm having trouble getting a response from my php jquery / json / ajax. I keep bining all these different tutorials together but I still can't seem to pull it all together since no one tutorial follow what I'm trying to do.

Right now I'm trying to pass two arrays (since there's no easy way to pass associative arrays) to my jquery ajax function and just alert it out. Here's my code:

PHP

$names = array('john doe', 'jane doe');
$ids = array('123', '223');

$data['names'] = $names;
$data['ids'] = $ids;

echo json_encode($data);

Jquery

function getList(){
    $.ajax({  
        type: "GET", 
        url: 'test.php', 
        data: "",  
        plete: function(data){ 
            var test = jQuery.parseJSON(data);
            alert(test.names[0]);
            alert("here");
        }
    },
        "json");
}
getList();

In my html file all I'm really calling is my javascript file for debugging purposes. I know i'm returning an object but I'm getting an error with null values in my names section, and i'm not sure why. What am I missing?

My PHP file returns

{"names":["john doe","jane doe"],"ids":["123","223"]}

It seems to be just ending here Uncaught TypeError: Cannot read property '0' of undefined so my sub0 is killing me.

• php
• javascript
• jquery
• html
• json

• When I try to solve these problems, I split it into two: Server-side and client-side. Step 1: Is your server returning a JSON object in the format you're expecting? Try hitting /test.php in your browser and examine the JSON response. If that looks good, then output the JSON string in your JS callback. – jamesmortensen Commented Apr 8, 2012 at 7:42
• 1 I think that in $.ajax you have to set dataType: 'json' instead of 'json' at end (how you do in $.get OR $.post ) – kappa Commented Apr 8, 2012 at 7:42
• my php file seems fine to me. How would I go about outputting my json to see how that looks besides an alert? – Howdy_McGee Commented Apr 8, 2012 at 7:45
• 1 In your debugger, Firebug or Chrome dev, visit the NET tab and look for your request. In the "Response" or "JSON" section, you can see what the server sent back to the browser. – jamesmortensen Commented Apr 8, 2012 at 7:51
• 1 A browser reserves the right to act funny if it doesn't get the content type when getting a php generated file (JSON, CSS, XML etc). You should always write this before your json_encode function: header('Content type: application/json'); This m – Chad Hedgcock Commented Apr 8, 2012 at 7:59

4 Answers 4

You could prob use the $.getJSON facade that jQuery provides, this will setup all the required ajax params for a standard JSON request:

$.getJSON('test.php', function(response) {
    alert(response.names[0]);   // john doe
}); 

However i think the route of the issue is that 1) your server may not be returning the correct response codes and/or the correct headers (ie: JSON data) - however the above method at least for the latter should force this conclusion.

See: http://api.jquery./jQuery.getJSON

It looks like the problem is that you're using the plete callback instead of the success callback:

function getList(){
    $.ajax({  
        type: "GET", 
        url: 'test.php', 
        data: "",  
        success: function(data) { /* success callback */
            var test = jQuery.parseJSON(data);
            alert(test.names[0]);
            alert("here");
        }
    },
    "json");
}
getList();

From jQuery AJAX Docs:

success(data, textStatus, jqXHR)

A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.

plete(jqXHR, textStatus)

A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request ("success", "notmodified", "error", "timeout", "abort", or "parsererror"). As of jQuery 1.5, the plete setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.

jQuery wants to know what kind of data to expect as a response, otherwise it wont know how to parse it.

So, as has been said before here, you tell jQuery using the dataType = 'json' attribute.

function getList() {
    $.ajax({  
        type: "GET", 
        url: 'test.php', 
        data: "",  
        dataType: "json",
        success: function(data) { 
            console.log(data);
        }
    });
}

On top of this it is a good idea to have PHP present its content as json rather than html. You use the header for this by setting header('Content-type: application/json'); before any output in your PHP script. So:

$names = array('john doe', 'jane doe');
$ids = array('123', '223');

$data['names'] = $names;
$data['ids'] = $ids;

header('Content-type: application/json');

echo json_encode($data);

You should pass all parameters for ajax() function in single object. So, there should be "dataType" option. Also, if you set data type explicitly, jQuery will parse JSON data for you. Complete callback will receive parsed JavaScript object as parameter.

function getList() {
    $.ajax({  
        type: "GET", 
        url: 'test.php', 
        data: "",  
        dataType: "json",
        success: function(test) { 
            alert(test.names[0]);
            alert("here");
        }
    });
}