1、先定义好下面需要用到的变量。
var queryObject = {} //用于保存请求参数
, currentLocationHash = location.hash.replace(/^#/,'') //页面载入时候的hash的值
, setLocationHash = function(queryObject) { //在地址栏保存请求的参数
var hashStr = [];
for(var queryName in queryObject) {
hashStr.push(queryName+'='+queryObject[queryName]);
}
location.hash = hashStr.join('&');
}
, getResult = function(queryObject) {
setLocationHash(queryObject);
$.get(location.href, queryObject, function(res) {
//处理请求回来的数据
}, 'json');
};
2、当页面载入或者刷新的时候保持之前的AJAX请求过后的页面状态。
//当页面载入的收如果之前执行请求
if(currentLocationHash) {
var hashQueryArray = currentLocationHash.split('&');
for(var i=0; i<hashQueryArray.length; i++) {
var queryString = hashQueryArray[i].split('=');
queryObject[queryString[0]] = queryString[1];
}
getResult(queryObject);
}
3、之后再执行请求的时候直接调用getResult函数就行了,如下面的ajax分页。
$('pageDivSelector').find('a').live('click', function(){
queryObject.page = $(this).attr('page'); //获取页码
getSearchResult(queryObject);
return false;
});
完整代码:
$(function(){
var queryObject = {} //用于保存请求参数
, currentLocationHash = location.hash.replace(/^#/,'') //页面载入时候的hash的值
, setLocationHash = function(queryObject) { //在地址栏保存请求的参数
var hashStr = [];
for(var queryName in queryObject) {
hashStr.push(queryName+'='+queryObject[queryName]);
}
location.hash = hashStr.join('&');
}
, getResult = function(queryObject) {
setLocationHash(queryObject);
$.get(location.href, queryObject, function(res) {
//处理请求回来的数据
}, 'json');
};
//当页面载入的收如果之前执行请求
if(currentHashStr) {
var hashQueryArray = currentHashStr.split('&');
for(var i=0; i<hashQueryArray.length; i++) {
var queryString = hashQueryArray[i].split('=');
queryObject[queryString[0]] = queryString[1];
}
getResult(queryObject);
}
});