用location对象的hash属性构建AJAX筛选功能

本文介绍了一种利用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);
  }
});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值