how to get variables from php using AJAX

Question

I want to send a value to a php script and execute it, after i want to get variables from the php script and show it using AJAX
this is the PHP script

<?php
include('config.php');
$_POST['username'];
$username = $_POST['username'];
$sql = mysql_query('SELECT * FROM users WHERE username="'.$username.'" ');
if ($req = mysql_fetch_array($sql) ) { 
$result = '<div class"result">' . $req['firstname']. "</div>";}
echo $result;
?>

and here is html and AJAX

<script>
$(document).ready(function() {
    $("#ajaxButton").click(function() {
        $.ajax({
            url:'toAction.php',
            data:{username: $('#username').val()},
            type:'POST',
        });
    });
});
</script>
<input type="text" name="username" id="username"/>
<input type="button" value="Find" id="ajaxButton"/>
<div id="result"></div>

in <div id="result"></div> I want to show $result . How can I do this, and I m very sorry about my English ...

Answer 1

You will need to send the result back using the success callback to display $result like this:

<script>
$(document).ready(function() {
    $("#ajaxButton").click(function() {
        $.ajax({
            url:'toAction.php',
            data:{username: $('#username').val()},
            type:'POST',
            success: function(data) {
              $('#result').html(data);
            }
        });
    });
});
</script>

Answer 2

You can use it like that.

  $.ajax({
            url:'toAction.php',
            data:{username: $('#username').val()},
            type:'POST',
            success: function(phpData){
            //PHP data can be used he!
            alert(phpData);
            }
        });