ajax to a php and get JSON from it

Question

I have a php file that i connect to it with ajax and callback value is JSON when i get data from php it dosnt show and when alert data i see Object

Where is my problem ?

PHP:

if(isset($_SERVER["HTTP_X_REQUESTED_WITH"])){

    $query = mysql_query("select * from tab");

    for ($i=0;$i<mysql_num_rows($query);$i++){

         while($row = mysql_fetch_assoc($query)){
             $title['t'][i] = $row['title'];
             $title['d'][i] = $row['description'];
         }
    }

echo(json_encode($title));
exit();

?>

JS:

$('#button').click(function(){
    $.ajax({
        url : "test2.php",
        data : $("#tab"),
        type : "GET",
        success : function(b){
                      b = eval('('+ b +')');    
                      console.log((b['t']));
                      alert(b);
                  }
    });
});

How can i get all of data from this JSON and show me corect it ?

Answer 1

Here's a full working example with single row fetch and multi row fetch, without using mysql_ syntax and using prepared statements to prevent sql injections.

And yes, DON'T use mysql specific syntax, like I mentioned here: I cant get the form data to go into database. What am I doing wrong?

function example()
{
    var select = true;
    var url = '../scripts/ajax.php';

    $.ajax(
    {
        // Post select to url.
        type : 'post',
        url : url,
        dataType : 'json', // expected returned data format.
        data : 
        {
                'select' : select // the variable you're posting.
        },
        success : function(data)
        {
            // This happens AFTER the PHP has returned an JSON array,
            // as explained below.
            var result1, result2, message;

            for(var i = 0; i < data.length; i++)
            {
                // Parse through the JSON array which was returned.
                // A proper error handling should be added here (check if
                // everything went successful or not)

                result1 = data[i].result1;
                result2 = data[i].result2;
                message = data[i].message;
                // Do something with result and result2, or message.
                // For example:
                $('#content').html(result1);

               // Or just alert / log the data.
               alert(result1);
            }
        },
        complete : function(data)
        {
            // do something, not critical.
        }
    });
}

Now we need to receive the posted variable in ajax.php:

$select = isset($_POST['select']) ? $_POST['select'] : false;

The ternary operator lets $select's value become false if It's not set.

Make sure you got access to your database here:

$db = $GLOBALS['db']; // An example of a PDO database connection

Now, check if $select is requested (true) and then perform some database requests, and return them with JSON:

if($select)
{
    // Fetch data from the database.
    // Return the data with a JSON array (see below).
}
else
{
    $json[] = array
    (
        'message' => 'Not Requested'
    );
}
echo json_encode($json);
flush();

How you fetch the data from the database is of course optional, you can use JSON to fetch a single row from the database or you can use it return multiple rows.

Let me give you an example of how you can return multiple rows with json (which you will iterate through in the javascript (the data)):

function selectMultipleRows($db, $query)
{
    $array = array();
    $stmt = $db->prepare($query);
    $stmt->execute();
    if($result = $stmt->fetchAll(PDO::FETCH_ASSOC))
    {
        foreach($result as $res)
        {
            foreach($res as $key=>$val)
            {
                $temp[$key] = utf8_encode($val);
            }
            array_push($array, $temp);
        }
        return $array;
    }
    return false;
}

Then you can do something like this:

if($select)
{
    $array = array();
    $i = 0;

    $query = 'SELECT e.result1, e.result2 FROM exampleTable e ORDER BY e.id ASC;';
    foreach(selectMultipleRows($db, $query) as $row)
    {
        $array[$i]["result1"] = $row['result1'];
        $array[$i]["result2"] = $row['result2'];
        $i++;
    }

    if(!(empty($array))) // If something was fetched
    {
        while(list($key, $value) = each($array))
        {
             $json[] = array
             (
                 'result1' => $value["result1"],
                 'result2' => $value["result2"],
                 'message' => 'success'
             );
       }
    }
    else // Nothing found in database
    { 
        $json[] = array
        (
             'message' => 'nothing found'
        );
    }
}
// ...

Or, if you want to KISS (Keep it simple stupid):

Init a basic function which select some values from the database and returns a single row:

function getSingleRow($db, $query)
{
    $stmt = $db->prepare($query);
    $stmt->execute();
    // $stmt->execute(array(":id"=>$someValue)); another approach to execute.
    $result = $stmt->fetch(PDO::FETCH_ASSOC);
    if($result)
    {
        $array = (
            'result1' => $result['result1'], 
            'result2' => $result['result2']
        );
        // An array is not needed for a single value.
        return $array;
    }
    return false;
}

And then fetch the row (or the single value) and return it with JSON:

if($select)
{
    // Assume that the previously defined query exists.
    $results = getSingleRow($db, $query);
    if($results !== false)
    {
         $json[] = array
         (
             'result1' => $results['result1'],
             'result2' => $results['result2'],
             'message' => 'success'
         );
    }
    else // Nothing found in database
    { 
        $json[] = array
        (
             'message' => 'nothing found'
        );
    }
}
// ...

And if you want to get the value of $("#tab") then you have to do something like $("#tab").val() or $("#tab").text().

I hope that helps.

Answer 2

I suggest to use either:

b = jQuery.parseJSON(data)

see more here or

$.getJSON

instead of eval()