Wie aktualisiere ich einen Webseitenabschnitt mit jQuery/AJAX, ohne ihn neu zu laden?

So aktualisieren Sie einen Teil einer Seite ohne Neuladen mit jQuery/AJAX

Neuladen eines bestimmten Divs per Knopfdruck, ohne dass sich dies auf die gesamte Seite auswirkt Seite ist eine häufige Anforderung in der Webentwicklung. Dies kann mit der AJAX-Funktionalität von jQuery erreicht werden.

Beispiel

Angenommen, Sie haben eine Schaltfläche, die beim Klicken den Inhalt eines Div namens div1 aktualisieren soll . So können Sie es machen:

HTML:

<code class="html"><input type="button" id="myButton" value="Update DIV" />

<div id="div1">
    <!-- Content to be updated -->
</div></code>

jQuery:

<code class="javascript">$("#myButton").click(function() {
    $("#div1").load(location.href + " #div1");
});</code>

Erläuterung:

• Der jQuery-Click-Event-Handler ist an die Schaltfläche mit der ID myButton angehängt.
• Wenn auf die Schaltfläche geklickt wird, wird die load() wird für das Div mit der ID div1 aufgerufen.
Die Funktion
• load() lädt den Inhalt der angegebenen URL in die div.
In diesem Fall ist die URL
• location.href " #div1". Dadurch wird die URL der aktuellen Seite abgerufen und der #div1-Selektor angehängt.
Das Leerzeichen vor dem zweiten
• #-Zeichen ist entscheidend. Ohne sie lädt der obige Code die gesamte Seite innerhalb des Div neu.
Wenn auf die Schaltfläche geklickt wird, wird der Inhalt von
• div1 mit dem Inhalt desselben aktualisiert div von der aktuellen Seite.

Hinweis: Denken Sie daran, die jQuery-Bibliothek einzuschließen, bevor Sie den obigen Code verwenden.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich einen Webseitenabschnitt mit jQuery/AJAX, ohne ihn neu zu laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!