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.

Créez d'abord deux boutons. Lorsque vous cliquez sur le bouton, une requête est envoyée au serveur et l'identifiant des données est apporté au serveur via les paramètres, et le serveur renvoie le résultat correspondant aux données. -identifiant.

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>

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.

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

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

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

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

On peut voir que cela simule la fonction du navigateur enregistrant les requêtes ajax.

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 :

Tutoriel détaillé sur la création d'un panier avec Ajax+PHP

Comment implémenter l'effet de pagination AJAX

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!