Wie ändere ich Seiteninhalte dynamisch mit AJAX, ohne sie zu aktualisieren?

Seiteninhalt dynamisch ändern, ohne ihn zu aktualisieren

Problem:

Sie möchten aus einer Datenbank abgerufene Daten in einem Div anzeigen und aktualisieren Sie den Inhalt des Div, wenn auf einen Link geklickt wird, ohne die Seite zu aktualisieren.

Lösung:

Um dies zu erreichen, können Sie AJAX (Asynchronous JavaScript and XML), mit dem Sie asynchrone Anfragen an einen Server stellen können, ohne die Seite neu laden zu müssen. So implementieren Sie es:

1. Erstellen Sie eine JavaScript-Funktion:

Fügen Sie den Links einen Onclick-Ereignishandler hinzu, der eine JavaScript-Funktion auslöst. Diese Funktion verwendet AJAX, um eine Anfrage an ein PHP-Skript zu stellen und aktualisierte Daten abzurufen.

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

2. AJAX-Anfrage hinzufügen:

Verwenden Sie in der JavaScript-Funktion die jQuery-Methode $.load(), um eine AJAX-Anfrage an das PHP-Skript zu senden, das den Code zum Abrufen der Daten enthält.

3. Erstellen Sie ein PHP-Skript:

Erstellen Sie eine separate PHP-Datei (z. B. data.php), die die AJAX-Anfrage verarbeitet. Dieses Skript sollte:

1. Eine Verbindung zur Datenbank herstellen.
2. Die Daten basierend auf dem in der Anfrage übergebenen ID-Parameter abrufen.
3. Die abgerufenen Daten an den Client zurückgeben .

<code class="php"><?php
// Connect to database
require ('myConnect.php');

// Get the ID parameter
$id = $_GET['id'];

// Fetch data from database
$results = mysql_query("SELECT para FROM content WHERE para_ID='$id'");

// Check if data exists
if( mysql_num_rows($results) > 0 ) {
  $row = mysql_fetch_array( $results );
  echo $row['para'];
}
?></code>

4. Div-Inhalt aktualisieren:

Die Antwort des PHP-Skripts wird im Div mit der ID „myStyle“ angezeigt. Der Inhalt des Div wird dynamisch aktualisiert, ohne dass die Seite neu geladen werden muss.

Zusätzliche Hinweise:

• Möglicherweise müssen Sie die AJAX-Anfrage-URL und die Datenbankverbindung anpassen Einstellungen in den JavaScript- und PHP-Skripten entsprechend Ihrer spezifischen Umgebung.
• Sie können mehr über AJAX erfahren, indem Sie Online-Ressourcen konsultieren oder an Kursen teilnehmen, um Ihr Verständnis der asynchronen Programmierung zu verbessern.

Das obige ist der detaillierte Inhalt vonWie ändere ich Seiteninhalte dynamisch mit AJAX, ohne sie zu aktualisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!