Simplest way to use Ajax with jquery inbuilt function

Most of the time we use very complex methods to implement ajax in any javascript library. The easiest we ever seen is of jquery.

Since we are fan of jquery so we using its simplest way to implement ajax.

Scenario:

We have html as :

 Click me

Now, we have to fill this div (target) on clicking hyperlink “click” with some external file , say “source.php”, using Ajax (without refeshing whole page).

Content of “source.php”:

Jquery code for ajax :

$('.click').click(function(){
var postdata = "name=stone&class=fouth";
$.ajax({type: "POST",url: "source.php",data: postdata,success: function(msg){$('#target').html(msg)}});
});

and if you don’t want to pass a string from current page , you can use , the easiest way

$('.click').click(function(){
$('#target').load('someurl.php');
});

Content of “source.php”:

Thats it!!

Now when you will click on hyperlink , target div will fill with “stone and fourth” , without refreshing the whole page.

Cheers!