Comment mettre à jour le contenu d'une page Web de manière dynamique à l'aide d'AJAX sans rechargement ?

Modifier dynamiquement le contenu d'une page HTML sans rechargement

Vous souhaitez mettre à jour le contenu d'une page Web de manière dynamique, en particulier un div, sans déclencher une page rafraîchir. Ceci peut être réalisé via AJAX (JavaScript asynchrone et XML).

Approche jQuery

1. Définir la fonction JavaScript :

   <code class="javascript">function recp(id) {
     $('#myStyle').load('data.php?id=' + id);
   }</code>

2. Ajouter des gestionnaires d'événements :
   Remplacez les gestionnaires onClick dans votre HTML par la fonction recp :

   <code class="html"><a href="#" onClick="recp('1')" > One   </a>
   <a href="#" onClick="recp('2')" > Two   </a>
   <a href="#" onClick="recp('3')" > Three </a></code>

3. Créer un script PHP :
   Créez un fichier PHP distinct, tel que data.php, qui gère la récupération des données :

   <code class="php">$id = $_GET['id'];
   $results = mysql_query("SELECT para FROM content WHERE  para_ID='$id'");
   if( mysql_num_rows($results) > 0 )
   {
     $row = mysql_fetch_array( $results );
     echo $row['para'];
   }</code>

4. Charger les données dynamiquement :
   Lorsqu'un lien est cliqué, la fonction recp utilise AJAX pour charger les données de data.php dans le div avec l'identifiant 'myStyle' :

   <code class="html"><div id='myStyle'>
   </div></code>

Remarque : Assurez-vous que le chemin d'accès à data.php dans la fonction jQuery load() est correct et que le fichier PHP dispose des autorisations appropriées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!