Maison  >  Article  >  développement back-end  >  Comment puis-je modifier dynamiquement le contenu d’une page HTML sans actualiser la page à l’aide d’AJAX ?

Comment puis-je modifier dynamiquement le contenu d’une page HTML sans actualiser la page à l’aide d’AJAX ?

Barbara Streisand
Barbara Streisandoriginal
2024-10-22 11:16:30935parcourir

How Can I Alter HTML Page Content Dynamically Without Refreshing the Page Using AJAX?

Modifier le contenu d'une page HTML sans recharger à l'aide d'AJAX

Vous souhaitez mettre à jour le contenu d'un élément DIV sans actualiser la page lorsqu'un lien est cliqué. Voici comment y parvenir en utilisant PHP et AJAX :

Configuration PHP :

  • Créez un script PHP (par exemple, data.php) qui se connecte à votre base de données et récupère les données en fonction de l'identifiant du paramètre.

Marquage HTML :

  • Créez un élément DIV avec un identifiant (par exemple, myStyle) .
  • Ajoutez des liens avec des gestionnaires onClick qui appellent une fonction JavaScript avec l'identifiant comme argument.

JavaScript avec jQuery :

  • Incluez la bibliothèque jQuery.
  • Définissez une fonction recp qui utilise AJAX pour charger les données de data.php dans le myStyle DIV.

Exemple de code :

HTML :

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

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

<div id='myStyle'>
</div></code>

PHP :

<code class="php"><?php
  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'];
  }
?></code>

Une fois que vous avez implémenté cette solution, en cliquant sur les liens mettront à jour le contenu du myStyle DIV sans recharger la page.

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!

Déclaration:
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