CODEWITHSUNDEEP
phpjavascriptjqueryajax
Hzyf
Hzyf

Reputation: 1017

Better approach for displaying two PHP variable switch jQuery Ajax

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?

Upvotes: 1

Views: 98

Answers (4)

bigblind
bigblind

Reputation: 12887

Use this:

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

$(function(){
  $("#sentence-form").submit(function(){
    $.ajax({
      type : "GET",
      url : "newperson.php",
      success : function(response){
        items=response.split('&')
          $("#top-container").append(items[0]);  /* name  */
          $('#bottom-container").append(items[1]); / /*s(u should be i)rname */
        }
      });
   });
});

Upvotes: 1

Tim Wickstrom
Tim Wickstrom

Reputation: 5701

Although I like lonesomeday's answer, and I think that that is the way to go, I will post the alternative:

Relevant PHP:

echo $row["name"].'||'.$row["surname"];

Relevant JavaScript code:

success: function (response) {
    var parts = response.split('||');
    $("#name-container").append(parts[0]); //name
    $("#surname-container").append(parts[1]); //surname
}

Upvotes: 1

Indranil
Indranil

Reputation: 2471

Send the variables as a JSON array

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

And on the JavaScript code, access it as:

data.name and data.surname

Upvotes: 2

lonesomeday
lonesomeday

Reputation: 238115

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.

Upvotes: 8

Related Questions