Jquery-Sprungseite ohne Aktualisierung

jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zum dynamischen und interaktiven Erstellen von Websites verwendet wird. Durch die Verwendung von jQuery können Sie Ihre Website attraktiver und benutzerfreundlicher gestalten und gleichzeitig die Reaktionsfähigkeit beibehalten. Wenn es um JavaScript und die Erstellung von Webseiten geht, ist das Springen zu einer Seite ohne Aktualisierung eine sehr häufige Aufgabe. In diesem Artikel erfahren Sie, wie Sie dies mit jQuery erreichen.

Was ist eine Sprungseite ohne Aktualisierung?

Wenn ein Benutzer auf einen Link klickt oder ein Formular absendet, aktualisiert der Browser normalerweise die gesamte Seite. Dies kann zu unnötigen Verzögerungen führen und dadurch das Benutzererlebnis beeinträchtigen. Keine Aktualisierungsweiterleitungen bedeuten, dass Sie Benutzer auf eine neue Seite umleiten können, ohne die gesamte Seite zu aktualisieren.

Warum eine Sprungseite ohne Aktualisierung verwenden?

In modernen Webanwendungen sind aktualisierungsfreie Sprungseiten zu einem sehr wichtigen Bestandteil geworden. Das liegt daran:

• Bessere Benutzererfahrung: Sprungseiten ohne Aktualisierung aktualisieren nicht die gesamte Seite, was bedeutet, dass Benutzer nicht mehr auf das Neuladen der gesamten Seite warten müssen, was Zeit und unnötigen Ärger spart.

• Schnelles Laden: Da die aktualisierungsfreie Sprungseite Seiteninhalte asynchron laden kann, kann sie das Laden der Seite beschleunigen und Benutzern ein besseres Erlebnis bieten.

• SEO-Optimierung: Da nicht die gesamte Seite vollständig aktualisiert wird, kann die Aktualisierung der Seite die Zugänglichkeit der Seite verbessern, sodass Google und andere Suchmaschinen Ihren Seiteninhalt besser indizieren können.

Verwenden Sie jQuery, um aktualisierungsfreie Sprungseiten zu implementieren

Nachdem wir nun die aktualisierungsfreien Sprungseiten und ihre Vorteile verstanden haben, beginnen wir nun damit, zu sehen, wie Sie jQuery zur Implementierung verwenden.

Die Verwendung von jQuery ist sehr einfach. Klicken Sie einfach auf ein paar Codezeilen, um den Vorgang abzuschließen. Hier sind die einfachen Schritte, um eine Sprungseite ohne Aktualisierung zu erstellen:

• Erstellen Sie eine HTML-Seite.

• Fügen Sie die jQuery-Bibliothek im Skript-Tag hinzu. Sie können die jQuery-Bibliothek von der offiziellen jQuery-Website herunterladen.

• Erstellen Sie eine Funktion zur Verarbeitung von AJAX-Anfragen.

• Verwenden Sie jQuery, um Ereignisse zu definieren, die die Funktion zum Springen zur Seite ohne Aktualisierung auslösen.

Lassen Sie uns diesen Prozess detaillierter aufschlüsseln.

1. Erstellen Sie eine HTML-Seite

Zuerst müssen Sie eine HTML-Seite erstellen, die den folgenden Inhalt enthalten muss:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<meta charset="UTF-8">
<title>jQuery 无刷新跳转页面示例</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

7cdffbc981ce578dc6212f54b5f55c8e
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>jQuery 无刷新跳转页面示例</h1>
<button id="btn">跳转页面</button>

<script>
    $(document).ready(function() {
        // your code goes here
    });
</script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Hier können Sie sehen, dass wir die erforderlichen HTML-Tags hinzugefügt und gleichzeitig eine Schaltfläche und eine Schaltfläche zum Einbinden des JavaScript-Codeskripts hinzugefügt haben Etikett.

2. jQuery-Bibliothek hinzufügen

Als nächstes müssen Sie die jQuery-Bibliothek hinzufügen. Hier verwenden wir jQuery CDN, um die jQuery-Bibliothek abzurufen.

727ec1cd05e5e850767cc7988d52c4352cacc6d41bbb37262a98f745aa00fbf0

Dadurch wird die jQuery-Bibliothek von der offiziellen jQuery-Website über abgerufen CDN Akquise beschleunigen.

3. Erstellen Sie eine Funktion zur Verarbeitung von AJAX-Anfragen

Als nächstes müssen Sie in jQuery eine Funktion zur Verarbeitung von AJAX-Anfragen schreiben. Sie können beispielsweise den folgenden Code verwenden:

function restartToPage(url) {

$.ajax({
    url: url,
    type:'GET',
    success: function(data) {
        $('body').html(data);
    },
    error:function (){}

});
}

Diese Funktion akzeptiert einen URL-Parameter und sendet ihn mithilfe einer AJAX-Anfrage an den Server. Wenn die Anfrage erfolgreich ist, werden die zurückgegebenen Daten in das HTML-Body-Element eingefügt.

4. Verwenden Sie jQuery, um Ereignisse zu definieren

Schließlich müssen Sie jQuery-Code hinzufügen und Ereignisse definieren, um die Funktion zum Überspringen der Seite ohne Aktualisierung auszulösen:

$(document).ready(function() {

$('#btn').click(function() {
    redirectToPage('http://www.example.com');
});

} );

Hier wird die Funktion „redirectToPage()“ durch Abhören des Klickereignisses der Schaltfläche ausgelöst und ihr wird die URL „http://www.example.com“ als Parameter übergeben.

Wenn der Benutzer auf die Schaltfläche klickt, springt die Webseite ohne Aktualisierung zu einer neuen Seite.

Zusammenfassung:

jQuery ist ein sehr leistungsstarkes Tool, mit dem Entwickler interaktive Webanwendungen effizient erstellen können. Aktualisierungsfreie Sprungseiten sind ein wichtiger Faktor zur Verbesserung der Anwendungsleistung und des Benutzererlebnisses. In diesem Artikel erfahren Sie kurz, wie Sie mit jQuery Sprungseiten ohne Aktualisierung erstellen und so eine interaktivere Webanwendung erstellen. Mit diesen Grundroutinen können Sie problemlos mit jQuery beginnen, um sehr komplexe Webanwendungen zu schreiben.

Das obige ist der detaillierte Inhalt vonJquery-Sprungseite ohne Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!