Maison >interface Web >js tutoriel >Résoudre le problème avant et arrière d'ajax basé sur Jquery.history

Résoudre le problème avant et arrière d'ajax basé sur Jquery.history

亚连original: 2018-05-24 15:09:331550parcourir

Cet article vous présente principalement la résolution du problème avant et arrière d'ajax basé sur Jquery.history, qui implique la connaissance de jquery avant et arrière. Le contenu de cet article est classique et a une grande valeur de référence. connaissance pertinente de jquery en avant et en arrière dans Script Home Le site Web est pour votre référence

Le contenu suivant concerne Jquery.history résolvant le problème en avant et en arrière d'ajax. Veuillez voir ci-dessous pour plus de détails.

La prémisse de cet article est basée sur le contexte, les problèmes de référencement ne seront donc pas abordés ici. Dans le même temps, le système de gestion basé sur le backend n'a pas besoin d'être collecté, il ne prendra donc pas en compte les situations rafraîchissantes comme la saisie directe de l'URL ! ! !

Le history.state en html5 est utilisé ici pour résoudre le problème.

Il existe déjà une solution open source pour js appelée pushState sur Internet. Voir pjax

pour plus de détails Cependant, cette solution ne convient pas à mon projet (projet backend), surtout la méthode main n'est pas suffisante.

J'utilise jquery.history.js Vous pouvez vous référer à ce history.js

Regardez le code ci-dessous

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

Nom d'utilisateur3955aab585d1168651d5aff517588577 076402276aae5dbec7f672f8f4e5cc81

Userid 75e2f04ada9cdfa566f20c89fdc25a7e 076402276aae5dbec7f672f8f4e5cc81

Afficher les résultats

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

Citer d'abord les js de jquery et history.js

二

History.Adapter.bind(window, 'statechange', function () { Indique la surveillance des modifications lorsque vous cliquez en arrière, en avant ou sur la méthode js de l'historique. Exécuter une méthode personnalisée lorsqu'elle change.

History.pushState a trois paramètres : le titre de l'état, les paramètres de requête d'adresse personnalisés
Cette méthode ajoute des données à l'enregistrement de l'historique et modifie la barre d'adresse<.> History.getState() Récupère les paramètres d'état de l'adresse actuelle

Trois processus

1 Récupère d'abord les paramètres de la barre d'adresse et enregistre-les

2 Liez la méthode click contenant la marque de la classe apjax. La marque peut être arbitraire, il peut s'agir d'un bouton de lien, etc.

Lorsque vous cliquez dessus, enregistrez l'état avant d'exécuter la méthode ajax. et enregistrez-le dans golbalState, dans lequel la méthode de rappel est appelée à partir de l'attribut funname de la balise, la valeur de title est obtenue à partir de l'attribut title de la balise,
"globalPara": "globalControlValue": "globalControlHtml C'est Il est préférable d'attribuer la valeur dans la méthode ajax, telle que displayinfo

3 History.pushState est ajouté à l'enregistrement de l'historique et la barre d'adresse est modifiée

4 Lorsque vous y allez en arrière, exécutez la méthode dans History.Adapter.bind et récupérez d'abord le paramètre d'état

5 Modifiez les variables modifiées par js avant de revenir à la valeur d'origine, modifiez la valeur du composant html précédemment modifié à la valeur d'origine et restaurez le contenu html du composant html modifié à la valeur d'origine,

6 Réexécutez la méthode exécutée d'origine, c'est-à-dire la méthode enregistrée dans CallbackFunctions.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus