Solve the problem of browser remembering ajax requests and being able to move forward and backward

When we browse different web pages, we can use the browser's forward and back keys to go to the pages we have visited before and after. This article mainly introduces the method of making the browser remember the ajax request and be able to go forward and back. Friends who need it can refer to it

When we browse different web pages, we can use the browser’s forward and back keys Come and go to the pages we visited before and after. One thing these all have in common is that the address in the browser address bar has changed. The browser itself maintains a stack that records the history of pages visited by users. The stack records the order in which users access different pages.

But in development, we often use ajax technology to improve the user experience of web pages. However, Ajax itself does not change the URL in the browser address bar. It operates within the same web page. At this time, the browser does not record the Ajax request. In this case, after the user clicks the back button after triggering 5 ajax requests on a page, the browser will not request the previous ajax request again, but will return to the previous page.

The first way to solve this problem is to use the hash value of location. When the hash value of the URL changes, the page will not jump, but the browser will record the hashed URL in the history record. Using this feature, we can artificially simulate ajax requests with history functionality. Below is a demo of this method.

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>

First create two buttons. When the button is clicked, a request is sent to the server and the data-id is brought to the server through parameters, and the server returns the corresponding data- The result of id.
At the same time, change the button state and change the hash value of location to the value of data-id. Finally, monitor the location hash value changes and repeat the above steps.

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

When we click the button in the order of "1-2-1", the output of the console is as follows

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

At this time, we press the return button three times in a row, and the console output is as follows

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

It can be seen that browsing is simulated in this way The function of the server to record ajax requests.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

PHP login (ajax submission data and background verification)

AJAX achieves no-refresh user detection Name function

The problem of passing array parameters through ajax calling webservice in jQuery (graphic tutorial)

The above is the detailed content of Solve the problem of browser remembering ajax requests and being able to move forward and backward. For more information, please follow other related articles on the PHP Chinese website!