Lösen Sie das Problem, dass sich der Browser Ajax-Anfragen merkt und sich vorwärts und rückwärts bewegen kann

Wenn wir verschiedene Webseiten durchsuchen, können wir die Vor- und Zurück-Tasten des Browsers verwenden, um zu den Seiten zu gelangen, die wir vorher und nachher besucht haben. In diesem Artikel wird hauptsächlich erläutert, wie Sie den Browser dazu bringen, sich an die Ajax-Anfrage zu erinnern und sich vorwärts und rückwärts zu bewegen.

Wenn wir verschiedene Webseiten durchsuchen, können wir die Vorwärts- und Zurück-Tasten des Browsers verwenden. Besuchen Sie die Seiten, die wir vorher und nachher besucht haben. Allen gemeinsam ist, dass sich die Adresse in der Adressleiste des Browsers geändert hat. Der Browser selbst verwaltet einen Stapel, der den Verlauf der von Benutzern besuchten Seiten aufzeichnet. Der Stapel zeichnet die Reihenfolge auf, in der Benutzer auf verschiedene Seiten zugreifen.

Aber in der Entwicklung verwenden wir häufig Ajax-Technologie, um die Benutzererfahrung von Webseiten zu verbessern. Ajax selbst ändert jedoch nicht die URL in der Adressleiste des Browsers. Es wird auf derselben Webseite ausgeführt. Zu diesem Zeitpunkt zeichnet der Browser die Ajax-Anfrage nicht auf. In diesem Fall fordert der Browser, nachdem der Benutzer nach fünf von einer Seite ausgelösten Ajax-Anfragen auf die Schaltfläche „Zurück“ geklickt hat, die vorherige Ajax-Anfrage nicht erneut an, sondern kehrt zur vorherigen Seite zurück.

Die erste Möglichkeit, dieses Problem zu lösen, besteht darin, den Hash-Wert des Standorts zu verwenden. Wenn sich der Hash-Wert der URL ändert, springt die Seite nicht, aber der Browser zeichnet die gehashte URL im Verlaufsdatensatz auf. Mit dieser Funktion können wir Ajax-Anfragen mit Verlaufsfunktionalität künstlich simulieren. Unten finden Sie eine Demo dieser Methode.

ul{
 margin:0;
 padding:0;
}
li{
 list-style: none;
 display: block;
 float: left;
 border: 1px solid #000;
 padding: 10px;
 margin-right: 20px;
 cursor: pointer;
}
li.active{
 background-color: #000000;
 color: #fff;
}
<ul>
 <li data-id="1">1</li>
 <li data-id="2">2</li>
</ul>

Erstellen Sie zunächst zwei Schaltflächen. Wenn auf die Schaltfläche geklickt wird, wird eine Anfrage an den Server gesendet und die Daten-ID wird über Parameter an den Server übermittelt. und der Server gibt die entsprechenden Daten zurück. Das Ergebnis der ID.
Ändern Sie gleichzeitig den Schaltflächenstatus und den Hash-Wert des Standorts in den Wert der Daten-ID. Überwachen Sie abschließend die Änderungen des Standort-Hash-Werts und wiederholen Sie die obigen Schritte.

function sendAjax(hash){
 console.log("recived data:" + hash);
}
function btnStatus(hash){
 $("li").removeClass('active');
 $("li[data-id="+hash+"]").addClass('active');
}
function onHashChange(){
 var curHash = window.location.hash.replace("#","");
 if(curHash){
  btnStatus(curHash);
  sendAjax(curHash);
 }
}
window.onhashchange = onHashChange;
$("li").click(function(){
 var id = $(this).attr('data-id');
 window.location.hash = id;
});

Wenn wir die Schaltflächen in der Reihenfolge „1-2-1“ anklicken, ist die Ausgabe der Konsole wie folgt

recived data:1
recived data:2
recived data:2

Zu diesem Zeitpunkt drücken wir dreimal hintereinander die Zurück-Taste und die Konsolenausgabe lautet wie folgt

recived data:1
recived data:2
recived data:1

Es ist ersichtlich, dass das Surfen auf diese Weise simuliert wird. Die Funktion des Servers, Ajax-Anfragen aufzuzeichnen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

PHP-Anmeldung (Ajax-Übermittlung von Daten und Hintergrundüberprüfung)

AJAX-Implementierung von Nichtaktualisierung Benutzererkennung Namensfunktion

Das Problem der Übergabe von Array-Parametern durch Ajax-Aufruf von Webservices in jQuery (grafisches Tutorial)

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem, dass sich der Browser Ajax-Anfragen merkt und sich vorwärts und rückwärts bewegen kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!