Comment faire en sorte que le navigateur mémorise les requêtes ajax et contrôle le navigateur en avant et en arrière

Cette fois, je vais vous expliquer comment faire en sorte que le navigateur mémorise les requêtes ajax et contrôle l'avant et l'arrière du navigateur. Ce qui suit est un cas pratique, jetons un coup d'œil. 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. 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 avoir déclenché 5 requêtes ajax sur 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>

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

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

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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!