Returning multiple database reults with jquery Ajax

Question

Hey Guys. I am using the jQuery ajax function to send data from a form and return some results.

function get(){
    $.post('data.php', { name: $('#name').attr('value'),lname: $('#lname').attr('value')  },
            function (data){

                $('#age').html(data).show();

            });
    }

The function posts to data.php.

$name = $_POST['name'];
$lname = $_POST['lname'];

    //DB connect
    mysql_connect('localhost', 'root', 'password')
     or die("Could not connect: " . mysql_error());
    //DB select         
    mysql_select_db("users")
    or die("Could not find database: " . mysql_error());


    $sql="SELECT * FROM users WHERE name='$name'";
    $result=mysql_query($sql)or die(mysql_error());

    $row = mysql_fetch_array($result);

    $return_name  =$row['name'];        //set the session for the user login
    $return_lname =$row['lname'];
    $return_age =$row['age'];

    echo $return_name;
    echo $return_lname;
    echo $return_age;

The output is all displayed in the #age div but i want to be able to specify each of the three outputs to a different div?

Thanks guys.

emco · Accepted Answer · 2011-03-29 04:42:43Z

First, You can use the val function to retrieve the values from a form element. For example, instead of $('#name').attr('value'); you can use $('#name').val();

Second, in order to manipulate the data received from your data.php script, I recommend to use PHP JSON function like json_encode, like this:

//DB connect mysql_connect('localhost', 'root', 'password')
or die("Could not connect: " . mysql_error()); //DB select
mysql_select_db("users") or die("Could not find database: " . mysql_error());

$sql="SELECT * FROM users WHERE name='$name'";
$result=mysql_query($sql)or die(mysql_error());

$row = mysql_fetch_array($result);

// encoding array in json format and printing it...
echo json_encode(array("name"=>$row["name"], "lname"=>$row["lname"], "age"=>$row["age"]));

Third, you can manipulate the response like this:

function get(){ $.post('data.php', { name: $('#name').attr('value'),lname: $('#lname').attr('value') }, function (data){
            $('#div1').html(data.name).show();
            $('#div2').html(data.lname).show();
            $('#div1').html(data.age).show();
         });
}

ezkl · Accepted Answer · 2011-03-29 04:47:59Z

You may find it helpful to use PHP's JSON functions. This would allow you to use jQuery to update the proper DIV's.

Your jQuery might look something like this:

var name  = $("#name").val();  // May help to set variables first.
var lname = $("#lname").val();

$.post("data.php",
        {name:  name, lname: lname },
        function(data) {
          $("div#name").html(data.name);
          $("div#lname").html(data.lname);
          $("div#age").html(data.age);
        }, "json");

Your PHP might look something like this:

$sql="SELECT * FROM users WHERE name='$name'";
$result=mysql_query($sql)or die(mysql_error());

$row = mysql_fetch_array($result);

$return['name']  = $row['name'];        //set the session for the user login
$return['lname'] = $row['lname'];
$return['age']   = $row['age'];

echo json_encode($return);

nopolabs · Accepted Answer · 2011-03-29 05:38:05Z

Have your php database script return json and use your javascript success function to insert the results into the DOM as desired. Here's an example of how to request, generate, and handle a JSON result:

<?php
$results = array();
if ($_REQUEST['arg1']) { $results['res1'] = strtoupper($_REQUEST['arg1']); }
if ($_REQUEST['arg2']) { $results['res2'] = strtoupper($_REQUEST['arg2']); }
if (count($results) > 0) { echo json_encode($results); }
else { ?>
<html>
<head>
<title>example</title>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#go').click(function() {
            $.post('test.php', { arg1: 'homer', arg2: 'marge' }, function (data) {
                $('#one').text(data.res1);
                $('#two').html(data.res2);
            }, 'json');
        });
    });
</script>
</head>
<body>
<div id="one">bart</div>
<div id="two">lisa</div>
<a id="go" href="#"`>go</a>
</body>
</html>
<?php }

Collectives™ on Stack Overflow

Returning multiple database reults with jquery Ajax

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related