Comment modifier dynamiquement le contenu d'une page à l'aide d'AJAX sans actualisation ?

Modifier dynamiquement le contenu de la page sans actualisation

Problème :

Vous souhaitez afficher les données récupérées d'une base de données dans un div et mettre à jour le contenu du div lorsqu'un lien est cliqué, sans actualiser la page.

Solution :

Pour ce faire, vous pouvez utiliser AJAX (Asynchronous JavaScript and XML), qui permet de faire des requêtes asynchrones vers un serveur sans recharger la page. Voici comment le mettre en œuvre :

1. Créez une fonction JavaScript :

Ajoutez un gestionnaire d'événements onclick aux liens qui déclenche une fonction JavaScript. Cette fonction utilisera AJAX pour faire une requête à un script PHP et récupérer les données mises à jour.

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

2. Ajouter une requête AJAX :

Dans la fonction JavaScript, utilisez la méthode jQuery $.load() pour envoyer une requête AJAX au script PHP qui contient le code pour récupérer les données.

3. Créez un script PHP :

Créez un fichier PHP distinct (par exemple, data.php) qui gérera la requête AJAX. Ce script doit :

1. Se connecter à la base de données.
2. Récupérer les données en fonction du paramètre id transmis dans la requête.
3. Renvoyer les données récupérées au client .

<code class="php"><?php
// Connect to database
require ('myConnect.php');

// Get the ID parameter
$id = $_GET['id'];

// Fetch data from database
$results = mysql_query("SELECT para FROM content WHERE para_ID='$id'");

// Check if data exists
if( mysql_num_rows($results) > 0 ) {
  $row = mysql_fetch_array( $results );
  echo $row['para'];
}
?></code>

4. Mettre à jour le contenu du Div :

La réponse du script PHP sera affichée dans le div avec l'identifiant 'myStyle'. Le contenu du div sera mis à jour dynamiquement sans recharger la page.

Remarques supplémentaires :

• Vous devrez peut-être ajuster l'URL de la requête AJAX et la connexion à la base de données paramètres dans les scripts JavaScript et PHP pour correspondre à votre environnement spécifique.
• Vous pouvez en apprendre davantage sur AJAX en consultant des ressources en ligne ou en suivant des cours pour améliorer votre compréhension de la programmation asynchrone.

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!