Résoudre le problème de la requête ajax du navigateur et pouvoir avancer et reculer_lié à AJAX

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 présente principalement la méthode (1) pour permettre au navigateur de mémoriser la requête ajax et de pouvoir avancer et reculer. Les amis qui en ont besoin peuvent s'y référer

Lorsque nous parcourons différentes pages Web, nous pouvons y accéder. avancer via le navigateur, touche retour 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 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 des données est apporté au serveur via les paramètres, et le serveur renvoie le résultat correspondant aux données. -identifiant.
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;
});

Quand 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 retour bouton trois fois de suite, La sortie de la console est la suivante

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

On peut voir que cela simule la fonction du navigateur enregistrant les requêtes 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!