Maison > développement back-end > tutoriel php > Comment mettre à jour un affichage de commentaires avec AJAX toutes les 10 secondes dans jQuery ?

Comment mettre à jour un affichage de commentaires avec AJAX toutes les 10 secondes dans jQuery ?

Linda Hamilton
Libérer: 2024-11-04 01:54:02
original
1059 Les gens l'ont consulté

How to Update a Feedback Display with AJAX Every 10 Seconds in jQuery?

jQuery : mise à jour de l'affichage des commentaires via AJAX toutes les 10 secondes

Un scénario se présente dans lequel vous souhaitez mettre à jour un div de commentaires toutes les 10 secondes à l'aide d'AJAX . Pour y parvenir, vous pouvez utiliser les codes jQuery et PHP suivants.

Script jQuery :

<code class="javascript">$(document).ready(function(){
  setInterval(get_fb, 10000);
});

function get_fb(){
  var feedback = $.ajax({
    type: "POST",
    url: "feedback.php",
    async: false
  }).responseText;

  $('div.feedback-box').html(feedback);
}</code>
Copier après la connexion

Script PHP :

<code class="php">$result = mysql_query("SELECT * FROM feedback ORDER BY RAND() LIMIT 0,1");
while($row = mysql_fetch_array($result))
{
  $name = $row['name'];
  $location = $row['location'];
  $feedback = $row['feedback'];

  echo "
    <p>Name: $name, Location: $location, Feedback: $feedback.</p>
    ";
} </code>
Copier après la connexion

Explication :

Ce code utilise la fonction setInterval() pour appeler la fonction get_fb() toutes les 10 secondes . La fonction get_fb() utilise une requête AJAX pour récupérer les données de commentaires d'une base de données et met à jour le contenu du div avec les commentaires récupérés.

Option alternative :

Si vous souhaitez exécuter la fonction get_fb() uniquement une fois l'appel AJAX réussi, vous pouvez utiliser le rappel .ajax().success() :

<code class="javascript">function get_fb(){
  var feedback = $.ajax({
    type: "POST",
    url: "feedback.php",
    async: false
  }).success(function(){
    setTimeout(function(){get_fb();}, 10000);
  }).responseText;

  $('div.feedback-box').html(feedback);
}</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.cn
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