jquery ajax 前进后退,基于Jquery.history解决ajax的前进后退问题

  • Post author:
  • Post category:其他


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

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

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

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

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

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

看下面的代码

用户名

用户id

显示结果


提交

log:

///随机数

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

hello

“},{“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 = $(‘#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());

});

})

一 先引用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前进后退相关知识,请持续关注萬仟网网站。