In this example you can learn how Ajax is implemented using jQuery
When user clicks on the button( Call Ajax ) , a message should show at top of the call ajax button which is coming from the php file will also be displayed in Alert window
Save the below code as “index.php”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Ajax call with jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#mybutton').click(function() {
$.ajax({
type: 'GET',
url: 'message.php',
dataType: 'html',
success: function(html, textStatus) {
$('#ajaxResponse').html(html);
alert(html);
},
error: function(xhr, textStatus, errorThrown) {
alert('An error occurred! ' +(errorThrown?errorThrown:xhr.status));
}
});
});
});
})(jQuery);
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" style="background-color: #EF8E90;color: #FFFFFF; margin: auto; padding: 5px;">
<tr>
<td> </td>
</tr>
<tr>
<td><h1>Simple Ajax call with jQuery</h1></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><div id="ajaxResponse"></div></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><input type="button" name="mybutton" id="mybutton" value="Call Ajax" /></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
create a php file with the name “message.php”
<?php echo "This is test message"; exit; ?>
Now you can try this example in your browser by executing the index.php
simple ajax call with jquery
Hope it Helps you