Maison > base de données > tutoriel mysql > Comment puis-je mettre à jour dynamiquement le contenu d'une division à l'aide d'AJAX sans recharger les pages ?

Comment puis-je mettre à jour dynamiquement le contenu d'une division à l'aide d'AJAX sans recharger les pages ?

Susan Sarandon
Libérer: 2024-11-25 07:43:11
original
1163 Les gens l'ont consulté

How Can I Dynamically Update a Div's Content Using AJAX without Page Reloads?

Mise à jour dynamique du contenu de la page

Ce code vise à mettre à jour dynamiquement le contenu d'un élément div en cliquant sur un lien, sans recharger la page.

Le PHP généré Page

<?php
$id = '1';

function recp($rId) {
    $id = $rId;
}
?>

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

<div>
Copier après la connexion

La version améliorée par JavaScript

<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>
Copier après la connexion

Le script PHP pour la récupération de données

<?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'];
}
?>
Copier après la connexion

Dans cette configuration, cliquer sur l'un des liens déclenche la fonction JavaScript recp, qui utilise la méthode .load() de jQuery pour récupérer les données du script data.php via AJAX. Les données sont ensuite chargées dans le div #myStyle, mettant à jour dynamiquement son contenu sans actualiser 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 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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal