Back

Listes déroulantes reliées en PHP

TP3 AJAX

  1. 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.

  2. Activité

    1. Énoncé
      • On considère Une base de données MYSQL qui contient trois tables "gouvernorat" , "delegation" et "localites". Une localité appartienne à une délégation qui appartienne à son tour à un seul gouvernorat. La structure de cette base de données est la suivante :

        • Listes déroulantes reliées en PHP

      • A l’ouverture de la page Web, une seule liste déroulante est disponible, celle des gouvernorats. L’internaute y choisit un gouvernorat déclenchant une fonction jQuery. Celui-ci récolte l’information correspondant au choix de l’internaute pour générer dynamiquement le contrôle Select dépendant.
      • Cette nouvelle liste déroulante est seulement remplie des délégations (villes) recensées dans le gouvernorat sélectionné par le biais de la première liste.
      • Une nouvelle liste déroulante est seulement remplie des localités recensées dans la délégation sélectionnée par le biais de la deuxième liste.
      • La sélection d’une localité engendrera un affichage du code postal lié
      • Nous construisons ainsi dynamiquement des listes déroulantes liées en cascade pour le Web.
      • On propose de créer une page web comme le montre le schéma de la figure suivante:

        • Liste déroulante dépendante de jQuery




      • Créer le script js qui utilise jQuery et AJAX, ce script est appelée sur l’événement de Onchange de chaque liste déroulante.
      • Ce script demande à PHP les listes des délégations, localités et code postal via AJAX en envoyant la valeur de chaque liste déroulante sélectionnée.
      • Créer un script PHP qui permet de se connecter à la base de données.
      • Ainsi créer les scripts PHP, qui récupèrent les données des tables gouvernorats, délégations, localités et les codes postaux où le code de chaque table est transmis par la requête AJAX.
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la Solution !



Gérer les formulaires avec jQuery et Ajax
TP1 AJAX
author avatar
Riadh HAJJI

Riadh HAJJI

Ces articles pourraient aussi vous intéresser

Correction activités AJAX
1 avril, 2021

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 activités AJAX Activité 01 Énoncé Vous pouvez visualiser l’énoncé de l’activité Solution activité01.html <!DOCTYPE html> <html lang=”en”> <head> <!– Required meta tags –> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, …

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