Web Developer Juice - By web developers for web developers

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 :

1
2

<div id="target"></div>
<a href="#" class="click">Click me</a>

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”:

1
2
3

 <?php
echo $_POST['name'].' and '.$_POST['class'];
?>

Jquery code for ajax :

1
2
3
4

$('.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

1
2
3

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

Content of “source.php”:

1
2
3

 <?php
echo 'stone and fourth';
?>

Thats it!!

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

Cheers!