Question

I’m getting two random values from a table. The values are in the same row.

<?php
    $result = mysql_query("SELECT * FROM people ORDER BY RAND() LIMIT 1", $connection);
    $row = mysql_fetch_array($result);
    echo $row["name"];
    echo $row["surname"];
?>

And I want to display these two values at different div’s on my HTML page by using jQuery Ajax functions.

$(function()
{
    $("#sentence-form").submit(function()
    {
        $.ajax(
        {
            type: "GET",
            url: "newperson.php",
            success: function(response)
            {
                $("#top-container").append(response);  /* Both name and surname  */
            }
        });
    });
});

The problem is separating two values to display different in div’s. I tried to use two Ajax calls and I send boolean data to PHP to use with an if statement. So one of the Ajax calls displays name and the other one displays surname. But because of randomization, it’s a bit complicated to find surname of a name.

What is a better approach?

Answer 1

Yes: send the data in a data structure – probably JSON – so your client-side code knows which bit is which.

First, send the data with PHP’s json_encode function:

echo json_encode(array(
    'name' => $row['name'],
    'surname' => $row['surname']
));

Then use your browser’s ability to parse JSON:

$.ajax({
    type: "GET",
    url: "newperson.php",
    dataType: 'json',
    success: function (response) {
        $("#name-container").append(response.name);
        $("#surname-container").append(response.surname);
    }
});

response is now a Javascript object (something like {name: 'John', surname: 'Smith'}), so you can access the two parts as normal object members.