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

Mise à jour du contenu d'une page HTML sans actualisation

Pour mettre à jour le contenu d'une page Web de manière dynamique sans la recharger, AJAX (JavaScript et XML asynchrones) est employés. Cet article explique comment y parvenir en utilisant PHP, jQuery et JavaScript.

Approche

Étant donné que les gestionnaires onclick s'exécutent côté client, il n'est pas possible d'appeler directement les fonctions PHP. Au lieu de cela, les fonctions JavaScript utilisant AJAX sont utilisées pour appeler des scripts PHP et récupérer les données souhaitées.

Implémentation

1. Créer une fonction jQuery :

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

2. Script PHP séparé (data.php) :

<code class="php"><?php
require ('myConnect.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>

3. Intégration HTML :

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

<div id='myStyle'>
</div></code>

Comment ça marche

• Lorsque l'on clique sur un lien, la fonction recp() est invoquée, qui utilise .load() pour récupérer le contenu de data.php avec l'identifiant comme paramètre.
• data.php exécute la requête de base de données nécessaire et renvoie la valeur para pour l'identifiant donné.
• mises à jour de jQuery le contenu de l'élément #myStyle avec la valeur renvoyée, mettant ainsi à jour efficacement la page sans actualiser.

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!