Back

Correction activités AJAX

Correction activités AJAX

  1. Activité 01

    1. Énoncé
    2. Solution
      1. activité01.html
          2. <!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
          3.     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
          2. $(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
            2. 
<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
            3. $(document).ready(function() {
     $("#driver").click(function(event){
         $.post( 
           "result.php",
           { name: "Riadh HAJJI" },
           function(data) {
              $('#stage').html(data);
           }
        );
   
     });
 
  });
        3. Activite02.php
            4. <?php
if( $_REQUEST["name"] ) {

   $name = $_REQUEST['name'];
   echo "Bienvenue ". $name;
}

?>

      3. Activite JSON 01

        1. Énoncé
        2. Solution
          1. Activite-JSON-01.html
              2. <!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
              3.     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
              4. $(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
                2. <!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
                3. $(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);
      });
    });



          Les méthodes get et post jQuery AJAX
          Sommaire du cours AJAX
author avatar
Riadh HAJJI

Riadh HAJJI

Ces articles pourraient aussi vous intéresser

Listes déroulantes reliées en PHP
16 juin, 2021

Validation de formulaire à l’aide d’Ajax Champs de formulaire à saisie semi-automatique Un formulaire de connexion avec AJAX Gérer les formulaires avec jQuery et Ajax Listes déroulantes reliées en PHP TP1 AJAX TP3 AJAX TP3 AJAX TP3 AJAX Objectifs Apprendre à créer un Remplir une liste déroulante d’une page Web en fonction de la sélection réalisée dans un autre Select. …

Correction activités XMLHttpRequest
12 mars, 2021

Historique de l’objet XmlHttpRequest L’objet XmlHttpRequest Créer un objet XMLHttpRequest Générer des appels AJAX TP4 AJAX Correction activités XMLHttpRequest Objectifs Etre capable de manipuler l’objet XMLHttpRequest de JavaScript.. Activité 01 Énoncé Vous pouvez visualiser l’énoncé de l’activité Solution AJAX_act1.html AJAX_act1.js AJAX_act1.php Activité 02 Énoncé Vous pouvez visualiser l’énoncé de l’activité Solution AJAX_act2.html <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <script src=”AJAX_act2.js”></script> …

Correction exercices AJAX : Série 03
22 juin, 2020

Création de requêtes Ajax avec jQuery La méthode $.ajax() Les méthodes get() et post() jQuery AJAX La méthode $.getJSON() Exercices AJAX : Série 02 (Correction) Exercices AJAX : Série 03 (Correction) Correction exercices AJAX : Série 03 Objectifs Apprendre à créer un système d’inscription Exercice 01 Énoncé Vous pouvez visualiser l’énoncé de l’application Solution tp02-1 Ex01.html <!doctype html> <html lang=”fr”> …

Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement