Back

Correction activités AJAX

Correction activités AJAX

  1. Activité 01

    1. Énoncé
    2. Solution
      1. activité01.html
        • <!DOCTYPE html>
           <html lang="en">
            <head>
              <!-- Required meta tags -->
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              
              <!-- Bootstrap CSS -->
              <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
             <title>jQuery la méthode get </title>
             <script src="https://code.jquery.com/jquery-latest.js"></script>
             <link rel="stylesheet" type="text/css" href="style.css" />
          <script src="activite01-get .js"> </script>
          </head>
          <body>
          	<div class="container">
          		<div class="d-grid gap-1 pt-4 mt-4">
          			<fieldset class="col-md-6">    	
          				<legend>Méthode $.get()</legend>
          				<h2>Modifier le texte</h2>
          					<div class="result">ce contenu sera remplacé par le texte du fichier "ajax_load.txt" pour celà cliquez 
          						sur le bouton "changer le contenu"</div>
          					<button class="btn btn-primary">Changer le Contenu</button>
          			</fieldset>
          		</div>
          	</div>
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
          </body>
          </html>
          
          
          
      2. Activite01.css
        •     fieldset 
          	{
          		border: 1px solid #ddd !important;
          		margin: 0;
          		padding: 10px;       
          		position: relative;
          		border-radius:4px;
          		background-color:#f5f5f5;
          		padding-left:10px!important;
          	}	
          
          	legend
          		{
          			font-size:14px;
          			font-weight:bold;
          			margin-bottom: 0px; 
          			width: 35%; 
          			border: 1px solid #ddd;
          			border-radius: 4px; 
          			padding: 5px 5px 5px 10px; 
          			background-color: #ffffff;
          		}



      1. Activite01.js
        • $(document).ready(function(){
            $("button").click(function(){
              $.get("ajax_load.txt", function(result){
                $("div.result").html(result);
              });
            });
          });
    3. Activité 02

      1. Énoncé
      2. Solution
        1. Activite02.html
          • 
            <html>
                <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            
            <!-- Bootstrap CSS -->
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
            <script src="activite02-post.js"> </script>
                </head>
                <body>
                    <div class="container">
                    <div class="d-grid gap-1 pt-4 mt-4">
                      <p>Cliquez sur le bouton pour charger le fichier result.php -</p>
            		
                      <div id = "stage" style = "background-color:cc0;">
                         STAGE
                      </div>
                    
                      <input type = "button" class="btn btn-primary" id = "driver" value = "Charger des données" />
                    </div>
                    </div>
                    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
                </body>
                </html>
                
        2. Activite02.js
          • $(document).ready(function() {
                 $("#driver").click(function(event){
                     $.post( 
                       "result.php",
                       { name: "Riadh HAJJI" },
                       function(data) {
                          $('#stage').html(data);
                       }
                    );
               
                 });
             
              });
        3. Activite02.php
          • <?php
            if( $_REQUEST["name"] ) {
            
               $name = $_REQUEST['name'];
               echo "Bienvenue ". $name;
            }
            
            ?>
      3. Activite JSON 01

        1. Énoncé
        2. Solution
          1. Activite-JSON-01.html
            • <!DOCTYPE html>
               <html lang="en">
                <head>
                  <!-- Required meta tags -->
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1">
                  
                  <!-- Bootstrap CSS -->
                  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                 <title>jQuery la méthode get </title>
                 <script src="https://code.jquery.com/jquery-latest.js"></script>
                 <script src="activite-json-01.js"> </script>
              	<link rel="stylesheet" type="text/css" href="activite-json-01.css" />
              </head>
              <body>
                <div class="container">
                  <div class="d-grid gap-1 pt-4 mt-4">
                    <fieldset class="col-md-6">    	
                      <legend>Méthode $.getJSON</legend>
                      <h4>Afficher les informations d'une personne</h4>
              <div class="result" id = "zoneAffichage"><ul>Zône d'affichage</ul></div>
              <button class="btn btn-primary" id="driver">Changer le Contenu</button>
              </fieldset>
              </div>
              </div>
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
              </body>
              </html>
          2. Activite-JSON-01.css
            •     fieldset 
              	{
              		border: 1px solid #ddd !important;
              		margin: 0;
              		padding: 10px;       
              		position: relative;
              		border-radius:4px;
              		background-color:#f5f5f5;
              		padding-left:10px!important;
              	}	
              
              	legend
              		{
              			font-size:14px;
              			font-weight:bold;
              			margin-bottom: 0px; 
              			width: 35%; 
              			border: 1px solid #ddd;
              			border-radius: 4px; 
              			padding: 5px 5px 5px 10px; 
              			background-color: #ffffff;
              		}
          3. Activite-JSON-01.js
            • $(document).ready(function() {	   
              	   $("#driver").click(function(event){
              		  $.getJSON('result.json', function(personne) {
              			
              			 $('#zoneAffichage').html('<li> <b>Nom:</b> ' + personne.nom + '</li>');
              			 $('#zoneAffichage').append('<li><b>Age : </b>' + personne.age+ '</li>');
              			 $('#zoneAffichage').append('<li><b> Genre: </b>' + personne.genre+ '</li>');
              			 $('#zoneAffichage').append('<li><b> Adresse: </b>' + personne.adresse+ '</li>');
              			 $('#zoneAffichage').append('<li><b> Téléphone: </b>' + personne.tel+ '</li>');
              			 $('#zoneAffichage').append('</br>');
              
              		  });
              	   });
              		   
              	});
        3. Activite JSON 02

          1. Énoncé
          2. Solution
            1. Activite-JSON-02.html
              • <!DOCTYPE html>
                 <html lang="en">
                  <head>
                    <!-- Required meta tags -->
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    
                    <!-- Bootstrap CSS -->
                    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                   <title>jQuery la méthode get </title>
                   <script src="https://code.jquery.com/jquery-latest.js"></script>
                   
                
                </head>
                <body>
                  <div class="container">
                    <div class="d-grid gap-1 pt-4 mt-4">
                <table class="table table-bordered table-striped" id="personne_table">
                <thead>
                  <tr>
                  <td>Nom</td>
                  <td>Adresse</td>
                  <td>Genre</td>
                  <td>Désignation</td>
                  <td>Age</td>
                  <td>Téléphone</td>
                </tr>
                </thead>
                <tbody></tbody>
                      </table>
                      </div>
                  </div>
                <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
                </body>
                </html>
                <script src="activite-json-02.js"> </script>
                
                
            2. Activite-JSON-02.js
              • $(document).ready(function(){
                      $.getJSON("test.json",function(data){
                        var personne_data='';
                        $.each(data, function(key, value){
                        personne_data+='<tr>';
                        personne_data+='<td>'+value.name+'</td>';
                        personne_data+='<td>'+value.address+'</td>';
                        personne_data+='<td>'+value.gender+'</td>';
                        personne_data+='<td>'+value.designation+'</td>';
                        personne_data+='<td>'+value.age+'</td>';
                        personne_data+='<td>'+value.tel+'</td>';
                        personne_data+='</tr>';
                        });
                        $('#personne_table').append(personne_data);
                      });
                    });



Riadh HAJJI

Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement