Heim >Backend-Entwicklung >PHP-Tutorial >Wie aktualisiere ich DIV-Inhalte dynamisch mit AJAX, PHP und jQuery über Link-Klicks?

Wie aktualisiere ich DIV-Inhalte dynamisch mit AJAX, PHP und jQuery über Link-Klicks?

Susan Sarandon
Susan SarandonOriginal
2024-10-21 17:38:02569Durchsuche

How to Dynamically Update DIV Content Using AJAX, PHP, and jQuery via Link Clicks?

DIV-Inhalte über AJAX, PHP und jQuery dynamisch aktualisieren

Frage: Wie können Sie den Inhalt dynamisch aktualisieren? eines DIV-Elements mit AJAX, PHP und jQuery, wobei jeder Linkklick Daten aus der Datenbank abruft und das DIV durch die abgerufene Zusammenfassung ersetzt?

Antwort:

Schritt 1: Erstellen Sie die HTML-Struktur

  • Fügen Sie das DIV-Element ein, das die Zusammenfassung anzeigt:
<code class="html"><div id="summary"></div></code>
  • Fügen Sie eine Liste hinzu von Links, die den Zusammenfassungsabrufprozess auslösen:
<code class="html"><a href="?id=1" class="movie">Name of movie</a>
<a href="?id=2" class="movie">Name of movie</a></code>

Schritt 2: Implementieren Sie das jQuery-Skript

  • Erstellen Sie eine jQuery-Funktion, um das zu verarbeiten AJAX fordert den DIV an und aktualisiert ihn:
<code class="javascript"><script>
function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'Your URL',
    data: "id=" + id, // appears as $_GET['id'] @ your backend side
    success: function(data) {
      // data is your summary
      $('#summary').html(data);
    }
  });
}
</script></code>

Schritt 3: Klickereignis zu Links hinzufügen

  • Fügen Sie jedem Link ein Onclick-Ereignis hinzu. Übergabe der entsprechenden ID:
<code class="html"><a onclick="getSummary('1')">View Text</a></code>

Schritt 4: Serverseitiges PHP

  • Im PHP-Skript unter der in $ angegebenen URL. ajax(), rufe die Zusammenfassung basierend auf der empfangenen ID ab:
<code class="php">$id = $_GET['id'];
$summary = fetchSummary($id); // Fetch summary from database</code>
  • Gib die abgerufene Zusammenfassung als Zeichenfolge zurück:
<code class="php">echo $summary;</code>

Durch Klicken Nach den Links löst die jQuery-Funktion AJAX-Anfragen aus, ruft die Zusammenfassung aus dem PHP-Skript ab und aktualisiert das DIV mit dem abgerufenen Inhalt.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich DIV-Inhalte dynamisch mit AJAX, PHP und jQuery über Link-Klicks?. 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