Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
AJAX

Correction activités AJAX

Un cours complet pour maîtriser Correction activités AJAX.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
Pourquoi utiliser Ajax?
Le monde d'AJAX
Concevoir une application AJAX et PHP
Champs de formulaire à saisie semi-automatique
Création de requêtes Ajax avec jQuery
Exercices AJAX : Série 02
TP1 AJAX
Validation de formulaire à l'aide d'Ajax
Utiliser jQuery AJAX avec php MySQL
Les méthodes get() et post() jQuery AJAX
Un formulaire de connexion avec AJAX
Correction exercices AJAX : Série 02
Correction application 02 AJAX-PHP
TP3 AJAX
Correction TP3 AJAX
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  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="http://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="http://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="http://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);
      });
    });
          Les méthodes get et post jQuery AJAX
          Sommaire du cours AJAX