用location对象的hash属性构建AJAX筛选功能-优快云博客

本文链接：https://blog.youkuaiyun.com/luokuncool/article/details/25986307

本文介绍了一种利用URL hash来保存AJAX请求参数的方法，确保页面刷新或重新加载时能保留之前的请求状态。通过定义相关函数并在页面加载时检查hash值来实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
  }
});