Solve the forward and backward problem of ajax based on Jquery.history-JS Tutorial-php.cn

Solve the forward and backward problem of ajax based on Jquery.history

亚连

Release： 2018-05-24 15:09:33

Original

1458 people have browsed it

This article mainly introduces you to solve the forward and backward problem of ajax based on Jquery.history, which involves the knowledge of jquery forward and backward. The content of this article is classic and has great reference value. I hereby share the knowledge about jquery forward and backward in Script Home Website for your reference

The following content is about Jquery.history solving the forward and backward problem of ajax. Please see below for specific details.

The premise of this article is based on the background, so SEO issues will not be considered here. At the same time, the management system based on the backend does not need to be collected, so it will not consider refreshing situations like directly typing the URL! ! !

The history.state in html5 is used here to solve the problem.

There is already an open source solution for js called pushState on the Internet. See pjax

for details, but this solution is not suitable for my project (backend project), especially the main method is not enough.

I am using jquery.history.js You can refer to this history.js

Look at the code below

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <script src="js/jquery.history.js"></script>
</head>
<body>

Copy after login

Username

User id < br/>

Display results

<p id="ptxtinfo"><input id="txtinfo" type="text"/></p>
<br/>
<a funname="displayinfo" title="wxq" href="javascript:void(0);" class="apjax">提交</a>
<br/>
log:
<textarea id="log" style="width:100%;height:400px"></textarea>
</body>
</html>
<script>
   ///随机数
  function guid() {
    function S4() {
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    }
    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
  }
 /// 回调的方法
  function doCallback(fn, args) {
    fn.apply(this, args);
  }
    ///获取查询字符串
  function GetQueryString() {
    var result = "";
    var url = location.href;
      if(url.indexOf("?")>0){
        result = url.substring(url.indexOf("?") + 1, url.length);
        if (result != "") {
          result = result + "&";
        }
      }
    return "?" + result;
  }
  // 用来保存地址栏的参数，第一次页面加载的时候执行。 用来修改地址栏的时候，保留原始的参数
  var globalQuerystr;
  var golbalState = {
    "globalPara": {},// js调用方法执行时用的全局js参数，
    "globalControlValue": {},//js需要修改value的html组件 如文本 类似$(“#xxx”).val()
    "globalControlHtml": {},// js需要修改内部html内容的html组件 类似 $(“#yy”).html()
    "CallbackFunctions": "" // 回调的js方法 可以自己实现 ，用逗号分隔，一般是一个方法名
  };
  ///全局变量的问题 globaPara 保存全局变量
  ///多个控件变化 但是不在一个容器内的问题  数组的方式  History.pushState({state:1,rand:Math.random(), "globaPara":globaPara,  "valuecontrol":[{"txtuser":"1"},{"txtname":"2"}]  "htmlcontrol":[{"htmltxt":"<b>hello</b>"},{"htmlcheckbox1":""}] },"title","?data=1"
  //控件类型的问题 有的保存值就行 有的保存html更方便
  (function (window, undefined) {
    globalQuerystr = GetQueryString();
    var
        History = window.History, // Note: We are using a capital H instead of a lower h
        State = History.getState(),
        $log = $(&#39;#log&#39;);
    console.info("页面加载完毕");
    History.log(&#39;initial:&#39;, State.data, State.title, State.url);
    //页面第一次加载的时候 State没有属性
    History.Adapter.bind(window, &#39;statechange&#39;, function () { // Note: We are using statechange instead of popstate
      // Log the State
      var State = History.getState(); // Note: We are using History.getState() instead of event.state
      golbalState = State.data;
      if (golbalState) {
        //修改控件的val值
        if (golbalState.globalControlValue) {
          for (var i = 0; i < golbalState.globalControlValue.length; i++) {
            $("#" + golbalState.globalControlValue[i].controlid).val(golbalState.globalControlValue[i].controlvalue);
          }
        }
        //修改全局变量
        if (golbalState.globalPara) {
          for (var i = 0; i < golbalState.globalPara.length; i++) {
            eval("" + golbalState.globalPara[i].globalname + " =" + golbalState.globalPara[i].globalvalue + ";");
          }
        }
        //修改控件的html
        if (golbalState.globalControlHtml) {
          for (var i = 0; i < golbalState.globalControlHtml.length; i++) {
            $("#" + golbalState.globalControlHtml[i].controlid).html(golbalState.globalControlHtml[i].controlhtml);
          }
        }
        //执行恢复参数后要执行的函数
        if (golbalState.CallbackFunctions != "") {
          doCallback(eval("" + golbalState.CallbackFunctions), null);
        }
        //清空函数
        golbalState.CallbackFunctions = "";
      }
      History.log(&#39;statechange:&#39;, State.data, State.title, State.url);
    });
  })(window);
  function displayinfo() {
    console.info("index:" + History.getCurrentIndex);
     //ajax方法，从服务器获取数据
    $("#txtinfo").val("我爱" + $("#txtUser").val() + $("#txtId").val());
  }
  $(function () {
    $(".apjax").on("click", function () {
      golbalState.globalControlValue = [{"controlid": "txtUser", "controlvalue": $("#txtUser").val()}];
      golbalState.CallbackFunctions = $(this).attr("funname");
      History.pushState(golbalState, $(this).attr("title"), globalQuerystr + "rnd=" + guid());
    });
  })
</script>

Copy after login

First quote the js of jquery and history.js

二

History.Adapter.bind(window, 'statechange', function () { Indicates that when you click the back forward or history js method, monitor the change. When the change Execute a custom method.

History.pushState has three parameters: state title and custom address query parameters.
This method adds data to the history record and modifies the address bar
History. getState() Get the state parameters of the current address

Three processes

1 First get the parameters of the address bar and save them

2. Bind the click method of the mark containing the apjax class. The mark can be arbitrary, it can be a link button, etc.
When clicked, save the state before executing the ajax method and save it to golbalState. The callback method is from the funname of the mark. Called from the attribute, the value of title is obtained from the title attribute of the mark,
"globalPara": "globalControlValue": "globalControlHtml It is best to assign the value in the ajax method, such as displayinfo

3 History .pushState is added to the history record and the address bar is modified

4 When going back, execute the method in History.Adapter.bind and obtain the state parameter first

5 Modify the variables modified by js before back to the original value, change the value of the previously modified html component back to the original value, and restore the html content in the modified html component to the original value,

6 Re-execute the original executed method, that is, the method saved in CallbackFunctions.

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

Use postMessage knowledge points in HTML5 to solve POST cross-domain problems in Ajax

##Some about ajax objects Summary of common problems with capitalization of common properties, events and methods

How to solve Ajax request session failure

The above is the detailed content of Solve the forward and backward problem of ajax based on Jquery.history. For more information, please follow other related articles on the PHP Chinese website!