Wie aktualisiere ich DIV-Inhalte dynamisch mit Ajax, PHP und jQuery?

DIV-Inhalte mit Ajax, PHP und jQuery ändern

In der Webentwicklung ist es oft notwendig, Teile einer Seite zu aktualisieren, ohne die gesamte Seite neu zu laden. Dies kann mit Ajax, PHP und jQuery erreicht werden.

Problemstellung

Eine Seite enthält ein DIV-Element, das aus der Datenbank stammenden Text und eine Liste von Hyperlinks enthält. Das Ziel besteht darin, die mit einem bestimmten Link verknüpfte Zusammenfassung (Text) in das DIV zu laden, wenn auf diesen Link geklickt wird.

Lösung

HTML:

Erstellen Sie die DIV- und Link-Elemente wie beschrieben:

<code class="html"><div id="summary">Here is summary of movie</div>

<a href="?id=1" class="movie">Name of movie</a>
<a href="?id=2" class="movie">Name of movie</a></code>

JavaScript (jQuery):

Verarbeiten Sie das Klickereignis auf den Links:

<code class="javascript"><script>
function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'your_php_url',
    data: "id=" + id,
    success: function(data) {
      $('#summary').html(data);
    }
  });
}
</script></code>

PHP:

Verarbeiten Sie die GET-Anfrage in einer PHP-Datei:

<code class="php">// get the ID from the request
$id = $_GET['id'];

// fetch the summary from the database
$summary = get_summary($id);

// return the summary as a string
echo $summary;</code>

Ereignisbindung:

Hinzufügen das onclick-Ereignisattribut zu den Links zum Aufrufen der getSummary-Funktion:

<code class="html"><a onclick="getSummary('1')">View Text</a>
<div id="#summary">This text will be replaced when the onclick event (link is clicked) is triggered.</div></code>

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich DIV-Inhalte dynamisch mit Ajax, PHP und jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!