Résoudre le problème du navigateur qui mémorise les requêtes ajax et peut avancer et reculer

Lorsque nous parcourons différentes pages Web, nous pouvons utiliser les touches avant et arrière du navigateur pour accéder aux pages que nous avons visitées avant et après. Cet article explique principalement comment faire en sorte que le navigateur mémorise la requête ajax et avance et recule. Les amis qui en ont besoin peuvent s'y référer

Lorsque nous parcourons différentes pages Web, nous pouvons utiliser les touches avant et arrière du navigateur. Venez et visitez les pages que nous avons visitées avant et après. Une chose que tous ont en commun est que l’adresse dans la barre d’adresse du navigateur a changé. Le navigateur lui-même gère une pile qui enregistre l'historique des pages visitées par les utilisateurs. La pile enregistre l'ordre dans lequel les utilisateurs accèdent aux différentes pages.

Mais en développement, nous utilisons souvent la technologie ajax pour améliorer l'expérience utilisateur des pages Web. Cependant, Ajax lui-même ne modifie pas l'URL dans la barre d'adresse du navigateur. Il fonctionne au sein de la même page Web. Pour le moment, le navigateur n'enregistre pas la requête Ajax. Dans ce cas, après que l'utilisateur ait cliqué sur le bouton retour après 5 requêtes ajax déclenchées par une page, le navigateur ne demandera plus la requête ajax précédente, mais reviendra à la page précédente.

La première façon de résoudre ce problème est d'utiliser la valeur de hachage de l'emplacement. Lorsque la valeur de hachage de l'URL change, la page ne saute pas, mais le navigateur enregistre l'URL hachée dans l'historique. Grâce à cette fonctionnalité, nous pouvons simuler artificiellement les requêtes ajax avec la fonctionnalité d'historique. Vous trouverez ci-dessous une démo de cette méthode.

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>

Créez d'abord deux boutons Lorsque vous cliquez sur le bouton, une requête est envoyée au serveur et l'identifiant de données est transmis au serveur via. paramètres, et le serveur renvoie le résultat correspondant de data-id.
En même temps, changez l'état du bouton et remplacez la valeur de hachage de l'emplacement par la valeur de data-id. Enfin, surveillez les changements de valeur de hachage d'emplacement et répétez les étapes ci-dessus.

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;
});

Lorsque l'on clique sur les boutons dans l'ordre "1-2-1", la sortie de la console est la suivante

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

A ce moment, on appuie sur le bouton retour trois fois de suite, et la sortie de la console est la suivante

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

est visible. Cela simule la fonction du navigateur enregistrant les requêtes ajax.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Connexion PHP (données de soumission ajax et vérification des antécédents)

Implémentation AJAX de l'utilisateur sans actualisation détection Fonction de nom

Problème dans jQuery appelant le service Web via ajax pour transmettre les paramètres du tableau (tutoriel graphique)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!