Extracted json url from example.com/myjsonsql.php to jquery mobile fail to return value

Question

i am a new php developers i was trying to create a simple system where i use php to extract database from mysql and use json in jquery mobile.

So here is the situation, I've created a custom .php json (to extract data from mysql) on my website and i've successfully upload it onto my website eg: www.example.com/mysqljson.php

This is my code extracting mysql data `

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

mysql_connect('localhost','root','') or die(mysql_error());

mysql_select_db('mydb');

$select = mysql_query('SELECT * FROM sample');

$rows=array();

while($row=mysql_fetch_array($select))
{
    $rows[] = array('id'=>$row['id'], 'id'=>$row['id'], 'username'=>$row['username'], 'mobileno'=>$row['mobileno'], 'gangsa'=>$row['gangsa'], 'total'=>$row['total']);

}

echo json_encode($rows);`

Which in returns gives me the following json @ http://i.imgur.com/d4HIxAA.png?1

Everything seems fine, but when i try to use the json url for extraction on jquery mobile it doesn't return any value.

i extract the json by using the following code;

function loadWheather(){
            var forecastURL = "http://example.com/mysqljson.php";

            $.ajax({
                url: forecastURL,
                jsonCallback: 'jsonCallback',
                contentType: "application/json",
                dataType: 'jsonp',
                success: function(json) {
                    console.log(json);
                    $("#current_temp").html(json.id);
                    $("#current_summ").html(json.id.username);      
                },
                error: function(e) {
                    console.log(e.message);
                }
            });
        }

The json.id @ #current_temp and json.id.username @ #current_sum dint return any result on my jquery mobile page.

I suspected i didn't extracted the json url correctly, but im not sure, could anyone help me identify the problem?

Thank you.

Answer 1

jsonp expects a callback function to be defined in the json being retrieved - for ecample see here .

Your data print screen is actually plain old fashioned json, not jsonp.

So I see 2 options:

• change the php data to render jsonp (this assumes you have control over data source).

• change your jquery request to expect plain old fastioned json (this assumes client and server are on same domain, otherwise CORS error happen), eg,,

    $.get(forecastURL) .then(function(json) { console.log(json); $("#current_temp").html(json.id); $("#current_summ").html(json.id.username); }) .fail(function(e) { console.log(e.message); }); 

Answer 2

First of all, you don't have to use jsonp to retrieve JSON. You could just do a simple Ajax Call. jQuery convert automatically your json string to a json object if your HTTP response contains the good Content-Type. And you did this good in your PHP call.

I think your problem comes from your json data analysis in your javascript success callback. The json generated is an array containing some user objects. In your code you don't work on one item of the array but you directly call .id or .username on the array. So javascript give you undefined values.

Here is an example displaying the data for the first item (index 0) of your json array. You have after that to choose for your own purpose how to treat your array objects but it's an example:

function loadWheather(){
        var forecastURL = "http://example.com/mysqljson.php";

        $.ajax({
            url: forecastURL,
            success: function(json) {
                console.log(json);
                // See, I use [0] to get the first item of the array.
                $("#current_temp").html(json[0].id);
                $("#current_summ").html(json[0].username);      
            },
            error: function(e) {
                console.log(e.message);
            }
        });
    }