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

Susan Sarandon
Freigeben: 2024-10-21 17:38:02
Original
548 Leute haben es durchsucht

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>
Nach dem Login kopieren
  • 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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
  • Gib die abgerufene Zusammenfassung als Zeichenfolge zurück:
<code class="php">echo $summary;</code>
Nach dem Login kopieren

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!

Quelle:php
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage