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

Correction TP3 AJAX

Un cours complet pour maîtriser Correction TP3 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. Objectifs

    • Apprendre à créer un système de saisie semi-automatique pour afficher la suggestion d'entrée à l'utilisateur.

  2. Exercice 01

      1. Énoncé
      2. Solution
        • Page: index.php
          
<?php
require_once("connexion.php");
?>
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<title>PHP Liste déroulante</title>
		<meta name="generator" content="Bootply" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
		<script src="js/script.js"></script>
	</head>
	<body>
<div class="container">	
	<nav class="navbar navbar-light bg-light">
		<div class="container pl-2">
			<a class="navbar-brand" href="#">
			<img src="apc_-161.png" alt="">
			</a>
		</div>
	</nav>
	<hr >
	
	<div class="row">
		<div class="col-sm-12">
			<div class="d-flex justify-content-center">
				<h3>Liste déroulante dépendante de jQuery – Gouvernorats , délégations et localités</h3>
			</div>
			<hr>
			<div class="d-flex justify-content-center">
			<div class="col-sm-6">
				<form name="insert" action="" method="post">
					<div class="row mb-3">
						<label for="inputEmail3" class="col-sm-3 col-form-label">Gouvernorats:</label>
						<div class="col-sm-8">
							<select onChange="getdelegation(this.value);"  name="gouvernorats" id="gouvernorats" class="form-control" >
								<option value="">Choisir le gouvernorat </option>
									<?php
									$reponse = $connexion->query('SELECT * FROM gouvernorats');
									while ($donnees = $reponse->fetch())			
									{ ?>
										<option value="<?php echo $donnees['cde_gouv'];?>"><?php echo $donnees['intitule_gouv_fr'];?></option>
									<?php
									}
									?>
							</select>
						</div>
					</div>
					<div class="row mb-3">
						<label for="inputEmail3" class="col-sm-3 col-form-label">Délégations :</label>
						<div class="col-sm-8">
							<select onChange="getlocalite(this.value);" name="delegation" 
							id="delegation-list" class="form-control">
									<option value="">Choisir la délégation</option>
							</select>
						</div>
					</div>
					<div class="row mb-3">
						<label for="inputEmail3" class="col-sm-3 col-form-label">Localités :</label>
						<div class="col-sm-8">
							<select onChange="getCdePostal(this.value);" name="localite" id="localite-list" 
							class="form-control">
										<option value="">Choisir la localité</option>
							</select>
						</div>
					</div>
					<div class="row mb-3">
						<label for="inputEmail3" class="col-sm-3 col-form-label">Code Postal :</label>
						<div class="col-sm-8">
						<input type="text" class="form-control" id="cdepostal-text" 
						placeholder="Sélectionner la localité pour afficher le code postal">
						<p id="cdepostal-texte"></p>
					</div>
					</div>
				</form>
			</div>
		</div>
		</div>
		</div>
		<hr>  
	</div>
</div>

<!--/container-fluid-->
	<!-- script references -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

	</body>
</html>
      3. Page: get_localite.php
        <?php
require_once("connexion.php");
if(!empty($_POST["cde_deleg"])) 
{
    $reponse = $connexion->prepare("SELECT * FROM localites WHERE cde_deleg =?");
    $reponse->execute([$_POST["cde_deleg"]]); 
?>
<option value="">Select localité</option>
<?php
while ($donnees = $reponse->fetch()) 
{
?>
    <option value="<?php echo  $donnees["cde_local"]; ?>"><?php echo  $donnees["intitule_local_fr"]; ?></option>
<?php
}
}
?>
      4. Page: get_delegation.php
        <?php
require_once("connexion.php");
if(!empty($_POST["cde_gouv"])) 
{
    $reponse = $connexion->prepare("SELECT * FROM delegations WHERE cde_gouv =?");
    $reponse->execute([$_POST["cde_gouv"]]); 
?>
<option value="">Select délégation</option>
<?php
while ($donnees = $reponse->fetch()) 
{
?>
    <option value="<?php echo  $donnees["cde_deleg"]; ?>"><?php echo  $donnees["intitule_deleg_fr"]; ?></option>
<?php
}
}
?>
      5. Page: get_cdePostal.php
        <?php
require_once("connexion.php");
if(!empty($_POST["cde_local"])) 
{
    $reponse = $connexion->prepare("SELECT cde_postal FROM localites WHERE cde_local=?");
    $reponse->execute([$_POST["cde_local"]]); 
    $donnees = $reponse->fetch();
}
?>
<?php echo  $donnees["cde_postal"]; ?>
Les méthodes get et post jQuery AJAX
Sommaire du cours AJAX