jQuery $.post not returning JSON data

Question

I've read multiple similar posts on this, and my code seems to match the suggestions, but still no data returned.

Here's my JS:

    $.post('php/get_last_word.php', { user_id : userID },
        function( data ) {
            currentLanguage = data.language_id;
            currentWord = data.word_id;
            console.log("currentLanguage = " + currentLanguage)
            console.log("currentWord = " + currentWord);        
    },'json');

And the relevant php:

$user_id=$_POST['user_id'];

mysql_select_db(wordsicle_search); 

$sql = "SELECT `language_id`, `word_id` FROM `save_state` WHERE `user_id`=$user_id";
$result = mysql_query($sql,$con);

while ($row = mysql_fetch_assoc($result)) {
    $encoded = json_encode($row);
    echo $encoded;
}

And the resulting log:

Connected successfully{"language_id":"1","word_id":"1"} 

So the json array is being echoed, but it's not ending up in data , because currentLanguage and currentWord are not being populated. Is this a problem with asynchronicity? Or something else?

Answer 1

Make sure you have a valid json coming back to your variable from your PHP script

IF your json object is like this,

{"language_id":"1","word_id":"1"}

You can access the values like this

currentLanguage = data.language_id;
currentWord = data.word_id;

Example JsFiddle http://jsfiddle.net/NuS7Z/8/

You can use http://jsonlint.com/ to verify your jSon is in correct form or not.

Specifying json as the data type value in your post request will make sure the reponse is coming back as json format to the success callback.

$.post('php/get_last_word.php',{user_id:userID}, dataType:"json",function(data){
        currentLanguage = data.language_id;
        currentWord = data.word_id;
});

You can also use getJson to simply get json data. getJson is a shorthand of ajax Call with datatype as json

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

Answer 2

Try changing your JS to:

 $.getJSON('php/get_last_word.php', { user_id : userID },
        function( response ) {
            if (response.success) {
                currentLanguage = response.data.language_id;
                currentWord = response.data.word_id;
                console.log("currentLanguage = " + currentLanguage)
                console.log("currentWord = " + currentWord);     
            } else {
                alert('Fail');
            }   
    });

and your PHP to:

<?php
$success = false;
$data = null;
$user_id=$_POST['user_id'];

mysql_select_db(wordsicle_search); 

$sql = "SELECT `language_id`, `word_id` FROM `save_state` WHERE `user_id`=$user_id";
$result = mysql_query($sql,$con);

while ($row = mysql_fetch_assoc($result)) {
    $success = true;
    $data = $row;
}

// I generally format my JSON output array like so:

// Response
header('Content-Type: application/json');
echo json_encode(array(
    'success' => $success,
    'data' => $data
));

?>

That way its more organized and don't forget to set the content type.

Hope that helps.