Médiaforma

jQuery – Requête GET via la fonction $.ajax()

Print Friendly
<!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 : http://www.mediaforma.com/encours/getAjax.htm

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply