Data returned for Ajax call

Question

I'm trying to return Data for Ajax, but I'm still not clear about something :
My Form :

<form id="checkitem" class="form-horizontal">
 <input type="text" name="item1"><br><br>
 <input type="submit" value="Submit">
</form>

Ajax call :

<script>
$(document).ready(function(){
    $('#checkitem').submit(function(){
        $.ajax({
            type: 'POST',
            url: 'operations.php?r=checkitem', 
            data: $(this).serialize()
        });    
     });
}); 
</script>

My PHP code (For operations.php?r=checkitem) :

$item1 = mysql_real_escape_string($_POST['item1']);
include ("data.php"); 
$query = mysql_query("INSERT INTO Itemlist (item1, ins_date) VALUES ('$item1',now()");
if (!$query)
{
    die('Invalid query: ' . mysql_error());
}
echo "Item1 has been added";

How to return echo value , or any other php variable from the page operations.php

EDIT :
As per your suggestion guys I should use success function :

 success : function(response){
             alert(response); //Do whatever you want to do with this

My question is , What is response ? is it all what has been echoed from other page ? or the HTML code of the other page ?

Thnx

Answer 1

You can do it like this.

AJAX has various callback functions, success is one of them. You can use others like error, complete.

success will be called when AJAX request successfully executed. This will provide use response text which we echo or print in our PHP page.

<script>
$(document).ready(function(){
   $('#checkitem').submit(function(){
     $.ajax({
         type: 'POST',
         url: 'operations.php?r=checkitem', 
         data: $(this).serialize(),
         success : function(response){
             alert(response); //Do whatever you want to do with this
         }
    })    
   });
 }); 
</script>