Wie aktualisiere ich Webseiteninhalte dynamisch ohne Seitenaktualisierung mit AJAX?

HTML-Seiteninhalte ohne Aktualisierung aktualisieren

Um den Inhalt einer Webseite dynamisch zu aktualisieren, ohne sie neu zu laden, eignet sich AJAX (Asynchronous JavaScript and XML). beschäftigt. In diesem Artikel wird erklärt, wie Sie dies mit PHP, jQuery und JavaScript erreichen.

Ansatz

Da Onclick-Handler clientseitig ausführen, ist ein direkter Aufruf von PHP-Funktionen nicht möglich. Stattdessen werden JavaScript-Funktionen unter Verwendung von AJAX verwendet, um PHP-Skripte aufzurufen und die gewünschten Daten abzurufen.

Implementierung

1. JQuery-Funktion erstellen:

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

2. Separates PHP-Skript (data.php):

<code class="php"><?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'];
}
?></code>

3. HTML-Integration :

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

<div id='myStyle'>
</div></code>

Wie es funktioniert

• Wenn auf einen Link geklickt wird, wird die Funktion recp() aufgerufen, die verwendet .load() zum Abrufen des Inhalts von data.php mit der ID als Parameter.
• data.php führt die erforderliche Datenbankabfrage aus und gibt den Parawert für die angegebene ID zurück.
• jQuery-Updates den Inhalt des #myStyle-Elements mit dem zurückgegebenen Wert, wodurch die Seite effektiv aktualisiert wird, ohne dass eine Aktualisierung erfolgt.

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