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>

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.

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!