Comment puis-je modifier dynamiquement le contenu d'une page HTML sans actualiser la page à l'aide d'AJAX ?

Modifier le contenu d'une page HTML sans recharger à l'aide d'AJAX

Vous souhaitez mettre à jour le contenu d'un élément DIV sans actualiser la page lorsqu'un lien est cliqué. Voici comment y parvenir en utilisant PHP et AJAX :

Configuration PHP :

• Créez un script PHP (par exemple, data.php) qui se connecte à votre base de données et récupère les données en fonction de l'identifiant du paramètre.

Marquage HTML :

• Créez un élément DIV avec un identifiant (par exemple, myStyle) .
• Ajoutez des liens avec des gestionnaires onClick qui appellent une fonction JavaScript avec l'identifiant comme argument.

JavaScript avec jQuery :

• Incluez la bibliothèque jQuery.
• Définissez une fonction recp qui utilise AJAX pour charger les données de data.php dans le myStyle DIV.

Exemple de code :

HTML :

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

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

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>

Une fois que vous avez implémenté cette solution, en cliquant sur les liens mettront à jour le contenu du myStyle DIV sans recharger la page.

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!