Maison > développement back-end > tutoriel php > Comment mettre à jour dynamiquement le contenu DIV à l'aide d'Ajax, PHP et jQuery ?

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

Patricia Arquette
Libérer: 2024-10-21 16:39:02
original
1137 Les gens l'ont consulté

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

Utiliser Ajax, PHP et jQuery pour mettre à jour dynamiquement le contenu DIV

Dans ce guide, nous explorerons le processus de modification dynamique du contenu d'un élément DIV à l'aide Ajax, PHP et jQuery.

Lorsqu'un utilisateur clique sur un lien, le script effectue un appel Ajax en utilisant l'URL du lien comme paramètre de données dans votre fichier PHP. Le fichier PHP traite ensuite les données et les renvoie sous forme de chaîne. Enfin, la chaîne est utilisée pour remplacer le contenu du DIV ciblé.

Pour implémenter cette fonctionnalité, suivez ces étapes :

<script>
function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'Your URL',
    data: "id=" + id, // appears as $_GET['id'] on the server-side
    success: function(data) {
      // data is your summary
      $('#summary').html(data);
    }
  });
}
</script>
Copier après la connexion

Ensuite, ajoutez un événement onclick aux éléments de votre liste :

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

En suivant ces étapes, vous pouvez mettre à jour dynamiquement le contenu d'un DIV avec les données récupérées de votre fichier PHP en utilisant les capacités de manipulation d'Ajax et jQuery.

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