1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Demo ajax</title>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
$(function(){
$( "a" ).click(function( objEvent ){
$("#ajax-status").empty();
$.ajax(
{
url: $(this).attr( "href" ),
type: "get",
dataType: "html",
error: function(){
ShowStatus( "AJAX - error()" );
$("#content").html( "<p>Page Not Found!!</p>" );
},
beforeSend: function(){
ShowStatus( "AJAX - beforeSend()" );
},
complete: function(){
ShowStatus( "AJAX - complete()" );
},
success: function( strData ){
ShowStatus( "AJAX - success()" );
$("#content").html( strData );
}
}
);
return( false );
});
});
function ShowStatus( strStatus ){
var jStatusList = $("#ajax-status");
jStatusList.append( "<p>" + strStatus + "</p>" );
}
</script>
</head>
<body>
<p>
<a href="./test/about.htm">About</a> -
<a href="./test/contact.htm">Contact</a> -
<a href="./test/office.htm">Office</a> -
</p>
<div id="content" style="float: left ; width: 50% ;">
<p>
Pas de contenu
</p>
</div>
<div id="ajax-status" style="float: right ; width: 45% ;">
</div>
</body>
</html> |
Partager