Comment puis-je mettre à jour dynamiquement le contenu d'une page HTML sans recharger la page ?

Modifier dynamiquement le contenu des pages HTML

La mise à jour du contenu Web sans recharger la page peut améliorer l'expérience utilisateur et les performances du site Web. Pour y parvenir, vous pouvez utiliser AJAX (JavaScript asynchrone et XML) en conjonction avec HTML, PHP, JavaScript et jQuery.

Considérez l'exemple suivant :

<a href="#" onClick="recp('1')">One</a>
<a href="#" onClick="recp('2')">Two</a>
<a href="#" onClick="recp('3')">Three</a>

<div>

Ce code affiche des liens pour récupérer différents contenus d'une base de données. Au lieu de recharger la page lorsqu'un lien est cliqué, vous devez utiliser AJAX pour récupérer les données de manière asynchrone et mettre à jour le contenu du div "myStyle" sans actualiser la page.

Pour y parvenir, vous pouvez utiliser le fonction JavaScript suivante :

<script type="text/javascript">
  function recp(id) {
    $('#myStyle').load('data.php?id=' + id);
  }
</script>

Cette fonction utilise la méthode load() de jQuery pour récupérer le contenu d'un script PHP distinct ("data.php") et remplacer le contenu du Div "myStyle" avec les données récupérées.

Le script PHP ("data.php") doit contenir le code nécessaire pour récupérer et afficher le contenu demandé :

require ('myConnect.php');     
$id = $_GET['id'];
$results = mysql_query("SELECT para FROM content WHERE  para_ID='$id'");   
if( mysql_num_rows($results) > 0 )
{
 $row = mysql_fetch_array( $results );
 echo $row['para'];
}

En implémentant ceci approche, vous pouvez mettre à jour dynamiquement le contenu de la page sans recharger la page, permettant aux utilisateurs de naviguer de manière transparente sur votre site Web tout en accédant à différents contenus à la demande.

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!