Médiaforma

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

Print Friendly
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Requête post $.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: 'POST',
            url: 'donneesPost.php',
            data: {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: 'POST',
            url: 'donneesPost.php',
            data: {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: 'POST',
            url: 'donneesPost.php',
            data: {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>

Ce code est accessible ici : http://www.mediaforma.com/encours/postAjax.htm

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

No comments yet.

Leave a Reply