Heim > Datenbank > MySQL-Tutorial > Wie kann ich den Inhalt eines Divs mithilfe von AJAX dynamisch aktualisieren, ohne dass die Seite neu geladen werden muss?

Wie kann ich den Inhalt eines Divs mithilfe von AJAX dynamisch aktualisieren, ohne dass die Seite neu geladen werden muss?

Susan Sarandon
Freigeben: 2024-11-25 07:43:11
Original
1092 Leute haben es durchsucht

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

Seiteninhalte dynamisch aktualisieren

Dieser Code zielt darauf ab, den Inhalt eines div-Elements beim Klicken auf einen Link dynamisch zu aktualisieren, ohne die Seite neu zu laden.

Das PHP-generierte Seite

<?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>
Nach dem Login kopieren

Die JavaScript-erweiterte Version

<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>
Nach dem Login kopieren

Das PHP-Skript zum Datenabruf

<?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'];
}
?>
Nach dem Login kopieren

In diesem Setup löst das Klicken auf einen der Links die recp-JavaScript-Funktion aus, die die .load()-Methode von jQuery verwendet Rufen Sie die Daten über AJAX aus dem data.php-Skript ab. Die Daten werden dann in das #myStyle-Div geladen, wodurch der Inhalt dynamisch aktualisiert wird, ohne dass die Seite aktualisiert wird.

Das obige ist der detaillierte Inhalt vonWie kann ich den Inhalt eines Divs mithilfe von AJAX dynamisch aktualisieren, ohne dass die Seite neu geladen werden muss?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage