Comment mettre à jour dynamiquement le contenu DIV à l'aide de jQuery, Ajax et PHP ?

Mary-Kate Olsen
Libérer: 2024-10-21 16:15:30
original
1069 Les gens l'ont consulté

How to Dynamically Update DIV Content Using jQuery, Ajax, and PHP?

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

Considérez un scénario dans lequel vous avez une page Web avec un DIV contenant du contenu dynamique à partir d'une base de données :

<div id="summary">Here is a summary of movie</div>
Copier après la connexion

De plus, il existe une liste de liens :

<a href="?id=1" class="movie">Name of movie</a>
<a href="?id=2" class="movie">Name of movie</a>
..
Copier après la connexion

Lorsqu'un utilisateur clique sur un lien :

  1. Requête Ajax avec données GET : La page envoie une requête Ajax en utilisant l'URL du lien pour transmettre des données via GET à un fichier PHP (généralement la même page).
  2. Réponse PHP avec chaîne : Le fichier PHP traite la requête et renvoie une chaîne contenant le texte récapitulatif.
  3. Mise à jour du contenu DIV : À l'aide de jQuery, l'élément #summary du DIV est mis à jour avec la chaîne renvoyée.

Pour implémenter cette fonctionnalité :

<code class="javascript">function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'Your URL',
    data: "id=" + id, // accessible as $_GET['id'] in PHP
    success: function(data) {
      $('#summary').html(data);
    }
  });
}</code>
Copier après la connexion

Dans le HTML, ajoutez un événement onclick à chaque lien :

<code class="html"><a onclick="getSummary('1')">View Text</a>
<div id="#summary">This text will be replaced when the link is clicked.</div></code>
Copier après la connexion

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!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal