Solve the problem that the browser remembers ajax requests and can move forward and backward.

Solve the problem that the browser remembers ajax requests and can move forward and backward.

When we browse different web pages, we can use the forward and backward buttons of the browser to go to the pages we visited before and after. This has one thing in common: the address in the browser address bar has changed. The browser maintains a stack that records the history of user access pages. The stack records the order in which users access different pages.

However, in development, ajax technology is often used to improve the user experience of web pages. However, ajax does not change the url in the browser's address bar and operates in the same webpage. In this case, the browser does not record ajax requests. In this case, after the user triggers five ajax requests on a page, the browser does not request the previous ajax request again, but returns the previous page.

The first method to solve this problem is to use the location hash value. When the hash value of a url changes, the page will not jump, but the browser will record the url with hash to the history. With this feature, we can manually simulate ajax requests with the history function. The following 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>

Create two buttons first. When you click the button, send a request to the server and bring the data-id to the server through the parameter. The server returns the result of the corresponding data-id.
At the same time, change the button status and change the location hash value to the data-id value. Finally, listen to the location hash value change 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 console output is as follows:

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

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

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

We can see that this simulates the ability of the browser to record ajax requests.

The above section describes how to enable the browser to remember ajax requests and forward and backward (1). I hope this will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!