accessing the jquery function after success call?

Question

 jQuery(function ($) {
     /* fetch elements and stop form event */
     $("form.follow-form").submit(function (e) {
      /* stop event */
      e.preventDefault();
      /* "on request" */
      $(this).find('i').addClass('active');
      /* send ajax request */
      $.post('listen.php', {
       followID: $(this).find('input').val()
      }, function () {
       /* find and hide button, create element */
       $(e.currentTarget)
         .find('button').hide()
         .after('<span class="following"><span></span>Following!</span>');
      });
     });
    });

i want to know what when i process the mysql query in the listen.php file, how deos it get the success message back, and then perform the change after?

Answer 1

it's XMLHTTP Object that is responsible behind the scene.

Answer 2

your php script should output text... so lets say the query works output "YES" if it doesn't output "NO" then use this function in your $.post():

function (data) {
    if(data=="YES"){
        // worked
    }
    else{
        // didn't work
    }
}

Answer 3

UPDATE

PHP code:

<?php
if ( $_POST['action'] == 'follow' ) {
 $json = '';
  if ( $_POST['fid'] == "2" ) {
  $json = array(  array( "id" => 1 , "name" => "luca" ),
                  array( "id" => 2 , "name" => "marco" )
               );
    }
 echo json_encode($json);
}
?>

jQuery code:

$.ajax({
    type: 'POST',
    url: 'listen.php',
    data: 'action=follow&fid=' + 2, //$(this).find('input').val(),
    success: function(data) {
    var obj = $.parseJSON(data);
        for ( var i = 0; i < obj.length; i++ ) {
         alert( obj[i].id + ' ' + obj[i].name )
         }
    },
    complete: function(data) {
        //alert(data.responseText);
    },
    error: function(data) {
        alert(data);
    }
});