Envoyer à un ami
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Requête get $.ajax()</title>
<style>
#zone {
width: 300px;
height: 315px;
border-style: solid;
border-width: 3px;
border-color: black;
}
</style>
</head>
<body>
<script src="jquery.js"></script>
<h2>Les lois de la robotique, selon Isaac Asimov</h2>
<button id="loi1">Loi N° 1</button>
<button id="loi2">Loi N° 2</button>
<button id="loi3">Loi N° 3</button><br><br>
<div id="zone"></div>
<script>
$(function() {
$('#loi1').on('click', function(){
$.ajax({
type: 'GET',
url: 'donnees.php?l=1',
timeout: 3000,
success: function(data){
$('#zone').html(data);
},
error: function(){
$('#zone').html('Cette requête AJAX n\'a pas abouti');
}
});
});
$('#loi2').on('click', function(){
$.ajax({
type: 'GET',
url: 'donnees.php?l=2',
timeout: 3000,
success: function(data){
$('#zone').html(data);
},
error: function(){
$('#zone').html('Cette requête AJAX n\'a pas abouti');
}
});
});
$('#loi3').on('click', function(){
$.ajax({
type: 'GET',
url: 'donnees.php?l=3',
timeout: 3000,
success: function(data){
$('#zone').html(data);
},
error: function(){
$('#zone').html('Cette requête AJAX n\'a pas abouti');
}
});
});
});
</script>
</body>
</html>
Le code est bien plus “verbeux” qu’avec la fonction $.get(), mais il est aussi très simple à comprendre, facile à maintenir et plus complet. Ici, nous avons introduit un message d’erreur si la requête n’aboutit pas :
error: function(){
$('#zone').html('Cette requête AJAX n\'a pas abouti');
}
Ce code est accessible ici : https://www.mediaforma.com/encours/getAjax.htm
Vous avez aimé cet article ? Partagez-le avec vos réseaux...