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

the ajax function of jquery has a success callback function, you can retrieve the data from the ajax page you called :

$.ajax({
    type: 'POST',
    url: 'operations.php?r=checkitem', 
    data: $(this).serialize(),
    success: function(result) {
        console.log(result);
        // do what you want with the result here
        // if it's html you could do $('.elem').html(result);
    }
})

The better is to specify which kind of data you're expecting with the type key : (type: 'json') or (type: 'text/html) for example. And in your php script, send headers in consequence !

Answer 2

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>

Answer 3

or use deferred way

$.ajax({
    type: 'POST',
    url: 'operations.php?r=checkitem', 
    data: $(this).serialize()})
.done(function(result){
    console.log(result);
})
.fail(function(error){
   console.log(error);
});