Comment mettre à jour dynamiquement le contenu DIV avec Ajax, PHP et jQuery ?

Modification du contenu DIV à l'aide d'Ajax, PHP et jQuery

Dans le développement Web, il est souvent nécessaire de mettre à jour des parties d'une page sans recharger la page entière. Ceci peut être réalisé en utilisant Ajax, PHP et jQuery.

Énoncé du problème

Une page contient un élément DIV contenant du texte provenant d'une base de données et une liste de liens hypertexte. L'objectif est de charger le résumé (texte) associé à un lien particulier dans le DIV en cliquant sur ce lien.

Solution

HTML :

Créez les éléments DIV et lien comme décrit :

<code class="html"><div id="summary">Here is summary of movie</div>

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

JavaScript (jQuery) :

Gérez l'événement de clic sur les liens :

<code class="javascript"><script>
function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'your_php_url',
    data: "id=" + id,
    success: function(data) {
      $('#summary').html(data);
    }
  });
}
</script></code>

PHP :

Gérer la requête GET dans un fichier PHP :

<code class="php">// get the ID from the request
$id = $_GET['id'];

// fetch the summary from the database
$summary = get_summary($id);

// return the summary as a string
echo $summary;</code>

Liaison d'événement :

Ajouter l'attribut d'événement onclick aux liens pour appeler la fonction getSummary :

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

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!