Comment puis-je mettre à jour dynamiquement le contenu d'une division avec AJAX sans actualisation de page ?

HTML - Modifier le contenu de la page dynamiquement sans actualisation

Défi :

Vous avez récupéré des données à partir d'une base de données et affiché dans un div. Lorsqu'un lien est cliqué, vous souhaitez mettre à jour le contenu du div sans actualiser la page.

Solution :

En tirant parti d'AJAX, vous pouvez contourner l'actualisation de la page et mettre à jour le div. contenu de manière transparente. Voici comment cela fonctionne :

Côté client (HTML et JavaScript) :

• Créez des liens avec des gestionnaires d'événements qui appellent des fonctions JavaScript.
• Dans ces fonctions JavaScript, utilisez la méthode load() de jQuery pour envoyer une requête à un script PHP avec des paramètres (par exemple, $('#myStyle').load('data.php?id=' id);).

Côté serveur (PHP) :

• Créez un fichier PHP séparé qui gère la requête AJAX.
• Récupérez les données de la base de données en utilisant le paramètre reçu de l'AJAX. demande.
• Renvoyer le contenu mis à jour au navigateur.

Exemple :

<a href="#" onclick="recp('1')"> One   </a>
<a href="#" onclick="recp('2')"> Two   </a>
<a href="#" onclick="recp('3')"> Three </a>

<div>
<pre class="brush:php;toolbar:false">function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}

// In data.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'];
}

En suivant ces étapes, vous pouvez mettre à jour le contenu du div de manière dynamique sans actualiser la page entière, ce qui rend votre site Web plus réactif et convivial.