Lösen Sie das Vorwärts- und Rückwärtsproblem von Ajax basierend auf Jquery.history-js-Tutorial-php.cn

Lösen Sie das Vorwärts- und Rückwärtsproblem von Ajax basierend auf Jquery.history

亚连

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

Original

1505 Leute haben es durchsucht

Dieser Artikel führt Sie hauptsächlich in die Lösung des Vorwärts- und Rückwärtsproblems von Ajax basierend auf Jquery.history ein. Der Inhalt dieses Artikels ist klassisch und hat einen großen Referenzwert Relevante Kenntnisse über Jquery vorwärts und rückwärts in Script Home Die Website dient als Referenz

Der folgende Inhalt befasst sich mit der Lösung des Vorwärts- und Rückwärtsproblems von Ajax durch Jquery. Weitere Informationen finden Sie weiter unten.

Die Prämisse dieses Artikels basiert auf dem Hintergrund, daher werden SEO-Probleme hier nicht berücksichtigt. Gleichzeitig muss das auf dem Backend basierende Verwaltungssystem nicht erfasst werden, sodass erfrischende Situationen wie die direkte Eingabe der URL nicht berücksichtigt werden! ! !

History.state in HTML5 wird hier verwendet, um das Problem zu lösen.

Es gibt bereits eine Open-Source-Lösung für js namens pushState im Internet. Weitere Informationen finden Sie unter pjax

. Diese Lösung ist jedoch nicht für mein Projekt (Backend-Projekt) geeignet, insbesondere reicht die Hauptmethode nicht aus.

Ich verwende jquery.history.js

Sehen Sie sich den Code unten an

<!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>

Nach dem Login kopieren

Benutzername

Benutzer-id ; br/>

Ergebnisse anzeigen

<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>

Nach dem Login kopieren

Zitieren Sie zuerst die js von jquery und History.js

二

History.Adapter.bind(window, 'statechange', function () { Gibt an, dass die Änderung überwacht wird, wenn Sie auf die Methode „Back Forward“ oder „History js“ klicken. Wenn die Änderung erfolgt, führen Sie eine benutzerdefinierte Methode aus.

History.pushState verfügt über drei Parameter, den Statustitel und benutzerdefinierte Adressabfrageparameter.
Diese Methode fügt Daten zum Verlaufsdatensatz hinzu und ändert die Adressleiste.
Verlauf. getState() Rufen Sie die Statusparameter der aktuellen Adresse ab

Drei Prozesse

1 Rufen Sie zuerst die Parameter der Adressleiste ab und speichern Sie sie sie

2 Binden Sie die Click-Methode des Tags, das die Apjax-Klasse enthält. Das Tag kann beliebig sein, es kann eine Link-Schaltfläche usw. sein.
Wenn Sie darauf klicken, speichern Sie den Status, bevor Sie das ausführen ajax-Methode und speichern Sie sie in golbalState. Die Callback-Methode wird aus dem Attribut funname aufgerufen, der Wert von title wird aus dem title-Attribut der Marke abgerufen,
„globalPara“: „globalControlValue“: „ globalControlHtml Am besten weisen Sie den Wert in der Ajax-Methode zu, z. B. displayinfo

3 History .pushState wird zum Verlaufsdatensatz hinzugefügt und die Adressleiste wird geändert

4 Wenn Sie zurückgehen, führen Sie die Methode in History.Adapter.bind aus und rufen Sie zunächst den Statusparameter ab

5 Ändern Sie die von js geänderten Variablen, bevor Sie sie auf den ursprünglichen Wert zurücksetzen, und ändern Sie den Wert der zuvor geänderten Variablen html-Komponente auf den ursprünglichen Wert zurücksetzen und den HTML-Inhalt in der geänderten HTML-Komponente auf den ursprünglichen Wert zurücksetzen,

6 Führen Sie die ursprünglich ausgeführte Methode erneut aus, d. h. die in CallbackFunctions gespeicherte Methode.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Verwendung von postMessage-Wissenspunkten in HTML5 zur Lösung domänenübergreifender POST-Probleme in Ajax

Über Ajax Objekte Zusammenfassung häufiger Probleme bei der Großschreibung gemeinsamer Attribute, Ereignisse und Methoden

So beheben Sie Ajax-Anforderungssitzungsfehler

Das obige ist der detaillierte Inhalt vonLösen Sie das Vorwärts- und Rückwärtsproblem von Ajax basierend auf Jquery.history. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!