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

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>
<pre class="brush:php;toolbar:false">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.