Solve the problem of browser ajax request and being able to go forward and backward_AJAX related

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 (1) to let the browser remember the ajax request and be able to move forward and backward. Friends who need it can refer to it

When we browse different web pages, we can move forward through the browser , back key to 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. The server returns the result corresponding to the data-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, when we press the return button three times in a row, the output of the console is as follows

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

It can be seen that this simulates the function of the browser recording ajax requests.

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