Heim >Datenbank >MySQL-Tutorial >Wie kann ich den Inhalt eines Divs mit AJAX ohne Seitenaktualisierung dynamisch aktualisieren?

Wie kann ich den Inhalt eines Divs mit AJAX ohne Seitenaktualisierung dynamisch aktualisieren?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-24 14:33:53820Durchsuche

How Can I Dynamically Update a Div's Content with AJAX Without Page Refresh?

HTML - Seiteninhalte dynamisch ändern, ohne sie zu aktualisieren

Herausforderung:

Sie haben Daten abgerufen aus einer Datenbank entnommen und in einem div angezeigt. Wenn auf einen Link geklickt wird, möchten Sie den Inhalt des Divs aktualisieren, ohne die Seite zu aktualisieren.

Lösung:

Mit AJAX können Sie Seitenaktualisierungen umgehen und die Divs aktualisieren Inhalte nahtlos. So funktioniert es:

Clientseitig (HTML und JavaScript):

  • Erstellen Sie Links mit Event-Handlern, die JavaScript-Funktionen aufrufen.
  • Verwenden Sie in diesen JavaScript-Funktionen die Methode „load()“ von jQuery, um eine Anfrage an ein PHP-Skript mit Parametern zu senden (z. B. $('#myStyle').load('data.php?id=' id);).

Serverseitig (PHP):

  • Erstellen Sie eine separate PHP-Datei, die die AJAX-Anfrage verarbeitet.
  • Rufen Sie die Daten aus der Datenbank mithilfe des vom AJAX erhaltenen Parameters ab Anfrage.
  • Den aktualisierten Inhalt an den Browser zurückgeben.

Beispiel:

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

<div>
function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}
// In data.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'];
}

Durch Folgen Mit diesen Schritten können Sie den Inhalt des Div dynamisch aktualisieren, ohne dass die gesamte Seite aktualisiert wird, wodurch Ihre Website reaktionsfähiger wird und benutzerfreundlich.

Das obige ist der detaillierte Inhalt vonWie kann ich den Inhalt eines Divs mit AJAX ohne Seitenaktualisierung dynamisch aktualisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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