天枫庄资源网

基于Jquery.history解决ajax的前进后退问题
网络编程 2024/12/27 佚名
2 0
天枫庄资源网 Design By www.wosibo.com

以下内容是关于Jquery.history解决ajax的前进后退问题，具体详情请看下文。

本文的前提是基于后台的，所以这里不会考虑seo的问题。同时，基于后台的管理系统，也不需要被收藏，所以也不会考虑刷新的这种类似直接敲网址的情况！！！

这里使用的是html5中的history.state 来解决。

网上已经有了js的开源解决方案pushState。详见pjax

但是这个方案不适合我的项目（后台项目），尤其是主要的方法有点不够用。

我使用的是  jquery.history.js  可以参考这个 history.js

看下面的代码

<!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="/UploadFiles/2021-04-02/jquery.min.js">


用户名 <input id="txtUser" type="text"/> <br/>


用户id <input id="txtId" type="text"/> <br/>


显示结果





<div id="divtxtinfo"><input id="txtinfo" type="text"/></div>
<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",""
  //控件类型的问题 有的保存值就行 有的保存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 = $('#log');
    console.info("页面加载完毕");
    History.log('initial:', State.data, State.title, State.url);
    //页面第一次加载的时候 State没有属性
    History.Adapter.bind(window, 'statechange', 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('statechange:', 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>





一 先引用jquery 和history.js  的js


二


History.Adapter.bind(window, 'statechange', function () {  表示在点击后退 前进或history的js方法时，监控变化。当变化时执行自定义的方法。




History.pushState 有三个参数 state title 自定义的地址查询参数。 

该方法往历史记录里添加数据，修改地址栏

 History.getState()  获取当前地址的state参数




三 流程 


1 首先获取地址栏的参数并保存 




2 绑定包含apjax类的标记的click方法， 标记可以任意，可以是div a链接 按钮等

  当点击的时候，保存执行ajax方法前的状态，保存到golbalState ，其中回调的方法从标记的funname属性中调取，title的值从标记的title属性获取，

 “globalPara":  "globalControlValue": "globalControlHtml  最好在ajax的方法中赋值，如displayinfo




3 History.pushState 添加到历史记录，并修改地址栏




4 当后退的时候，执行History.Adapter.bind中的方法，先获取state参数




5 把之前 js修改过的变量修改回原来的值  ，把之前修改的html组件的value的值改回原来的值，把修改过的html组件中的html内容恢复为原来的值，




6 重新执行原来的执行过的方法， 即CallbackFunctions中保存的方法。




以上内容给大家介绍的基于Jquery.history解决ajax的前进后退问题，代码知识起到演示的效果，重点在给大家介绍基本原理的实现。希望本文分享能够给大家带来意向不到的收获，欲了解更多有关jquery前进后退相关知识，请持续关注网站。 
标签：
jquery前进后退,jquery_ajax后退,jquery_ajax
天枫庄资源网 Design By www.wosibo.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
天枫庄资源网 Design By www.wosibo.com

评论“基于Jquery.history解决ajax的前进后退问题”

暂无基于Jquery.history解决ajax的前进后退问题的评论...
www.wosibo.com 天枫庄资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
天枫庄资源网 Design By www.wosibo.com