Comment mettre à jour dynamiquement le contenu DIV à l'aide d'AJAX, PHP et jQuery via des clics sur des liens ?

Mise à jour dynamique du contenu DIV via AJAX, PHP et jQuery

Question : Comment pouvez-vous mettre à jour dynamiquement le contenu d'un élément DIV utilisant AJAX, PHP et jQuery, où chaque clic sur un lien récupère les données de la base de données et remplace le DIV par le résumé récupéré ?

Réponse :

Étape 1 : Créer la structure HTML

• Inclure l'élément DIV qui affichera le résumé :

<code class="html"><div id="summary"></div></code>

• Ajouter une liste de liens qui déclenchent le processus de récupération du résumé :

<code class="html"><a href="?id=1" class="movie">Name of movie</a>
<a href="?id=2" class="movie">Name of movie</a></code>

Étape 2 : Implémenter le script jQuery

• Créer une fonction jQuery pour gérer le Requête AJAX et mise à jour du DIV :

<code class="javascript"><script>
function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'Your URL',
    data: "id=" + id, // appears as $_GET['id'] @ your backend side
    success: function(data) {
      // data is your summary
      $('#summary').html(data);
    }
  });
}
</script></code>

Étape 3 : Ajouter un événement de clic aux liens

• Ajouter un événement onclick à chaque lien, en passant l'ID correspondant :

<code class="html"><a onclick="getSummary('1')">View Text</a></code>

Étape 4 : PHP côté serveur

• Dans le script PHP à l'URL spécifiée en $. ajax(), récupérez le résumé en fonction de l'ID reçu :

<code class="php">$id = $_GET['id'];
$summary = fetchSummary($id); // Fetch summary from database</code>

• Renvoyer le résumé récupéré sous forme de chaîne :

<code class="php">echo $summary;</code>

En cliquant les liens, la fonction jQuery déclenchera les requêtes AJAX, récupérera le résumé du script PHP et mettra à jour le DIV avec le contenu récupéré.

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!