关闭

关于ajax无历史记录问题的解决

标签: ajax 历史回退 加载更多ajaxhtml5
461人阅读 评论(0) 收藏 举报
分类:

学习中偶然的机会了解到ajax是无记录的请求,那么这就带来了一个问题,如果客户要求点击浏览器的后退按钮时,要求退回的上一个’锚点‘?

下面记录一下多种解决方案中的比较简单的一个,实则借助了html5中强大的history对象的pushState方法,如有不正确的地方望请指出,握手~

需求:

  一个list的页面,页面的底部是一个加载更多的超链接或按钮,我得是超链接,

<div id="loading27">加载中</div>
<div class="tutor-btn">
     <a href="#" id="getMore" pageno="${pageNo+1}" typeid="2">加载更多</a>
</div>


部分js代码:

$(function() {
	$("#loading27").hide();
	$("#getMore").click(function() {
		var _this = $(this), typeId=_this.attr("typeid"),pageNo = _this.attr("pageno");// 分页码
		var url = '';
		if((typeId == '1_tutor') || (typeId == '1_major')){
			url = '/loadMore/tutorMajor';
		}
		if(typeId == 2){
			url = '/loadMore/activity';
		}
		if(typeId == 3){
			url = '/loadMore/student';
		}
		if (pageNo == 0) {
			return false;
		}
		$("#loading27").show();
		$.ajax({
			url : url,
			data : {
				typeId : typeId,
				pageNo : pageNo
			},
			success : function(data) {
				if (data != '') {
					$(".list-content:last").append(data);// 数据显示到页面
					_this.attr("pageno", Number(pageNo) + 1);// 分页+1
				} else {
					_this.text("已加载完");
					_this.removeAttr("href").css("background-color", "#d4d4d4");
					_this.attr("pageno", Number(pageNo) + 1);// 分页+1
				}
				$("#loading27").hide();
			}
		});
		return false;
	});
});

历史记录的js部分(重要)

function isContains(str, substr) {
	return str.indexOf(substr) >= 0;
}

function savePage() { // 操作浏览器的历史记录
	var nowTop = $(window).scrollTop();
	history.replaceState('', document.title, location.href.replace(
			location.hash, "")
			+ "#nowTop=" + nowTop);
}

function toTutorDeatil(tutorId) {
	var pageNo = $("#getMore").attr("pageno") - 1;
	var href = document.location.href;
	if (isContains(href, "pageNo")) 
		href = href.substring(0, href.indexOf("?"));
	history.pushState('', document.title, href + "?pageNo=" + pageNo);
	window.location.href = "/tutorMajor/tutor/detail?majortutorId=" + tutorId;
}

后台对应的java代码部分(之举其一)

/**
	 * 学员列表
	 * 
	 * @return
	 */
	@RequestMapping("/list")
	public ModelAndView activityList(Integer pageNo) {      // 接受前台传递过来的页号
		pageNo = null != pageNo && pageNo > 0 ? pageNo : 1;
		ModelAndView modelAndView = new ModelAndView("activity/activity");
		List<ActivityModel> activityList = activityService.findActivityList(null, 1, Constants.LOAD_MORN * pageNo);  // 将当前页码的数据一次性查出
		for (ActivityModel activity : activityList) {
			TutorMajorModel major = tutorMajorService.getTutorMajorPaperById(activity.getTutorId());
			activity.setTutorMajorModel(major);
		}
		modelAndView.addObject("activityList", activityList);

		// 文章列表
		List<TutorMajorModel> paperList = tutorMajorService.findPaperList(1, Constants.CEBIANLAN);
		modelAndView.addObject("paperList", paperList);
		modelAndView.addObject("pageNo", pageNo);    // 此处要将当前页回显到loadMore的'加载更多'的超链接上
		return modelAndView;
	}


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

混合app开发:自己实现的页面历史记录管理模块,解决页面"回退难"的问题

页面历史记录管理,其实和浏览器自带的前进和后退按钮很类似,就是为了保证在某个页面点击返回键的时候,能够正确地返回用户想要回到的上一个页面。对于浏览器来说,如果我们依次打开页面A-->B-->C-->D...
  • aitangyong
  • aitangyong
  • 2016-03-19 16:59
  • 1536

【新手】Git 常见问题整理

1. 如何从本地把项目上传到github 原文地址:http://blog.csdn.net/deng0zhaotai/article/details/38760883 首先要在Git...
  • stlst
  • stlst
  • 2015-06-24 13:03
  • 1167

关于HTML5 的history API介绍与使用

上一篇我们介绍了H5的营销,那么H5的营销必然会设计到一些技术性的问题,那么本篇我们就介绍H5的一些新型特性。首先我们来了解下history及其改变:大家都知道history即浏览器的历史记录,我们访...
  • wh_forever
  • wh_forever
  • 2015-11-26 19:58
  • 5748

混合app开发:自己实现的页面历史记录管理模块,解决页面"回退难"的问题

页面历史记录管理,其实和浏览器自带的前进和后退按钮很类似,就是为了保证在某个页面点击返回键的时候,能够正确地返回用户想要回到的上一个页面。对于浏览器来说,如果我们依次打开页面A-->B-->C-->D...
  • aitangyong
  • aitangyong
  • 2016-03-19 16:59
  • 1536

数据库完善--历史记录问题解决

之前设计的数据库最大的问题在于不能把过去某个时间的状态信息显示出来,只是记录了单个信息的操作记录。所以这样就会出现一些问题,例如,上个月一个班里面有32个人,前几天有一个人退学了,那么现在查询的这个班...
  • Jesse621
  • Jesse621
  • 2013-02-22 21:16
  • 6749

DWR dwr 2.0 dwr推 推 反转ajax 聊天系统 广播系统 字符串加密 历史记录 推技术 聊天系统源码 源码 注释

  • 2011-01-21 00:27
  • 643KB
  • 下载

【Win8系统文件历史记录出现问题怎么办】

文件历史记录出现问题怎么办?如果文件历史记录出现问题,你将在任务栏最右侧的通知区域中看到一条消息。 可以点击或单击该消息直接进入“操作中心”,然后在其中修复问题。 如果未能及时查看通知,可以在“控制面...
  • u010680329
  • u010680329
  • 2013-08-05 10:32
  • 426

如何用 Git 合并两个库(合并历史记录,解决冲突/改写路径)

本来已经不写文字博客了,一般心得都录成了视频(这在我看来是更好的方式),但是今天遇到一个关于 Git 的问题不太好重现也不便于录制视频,加上它本身很具有代表性也很有用,所以还是记录于此。 背景 一...
  • asd131531
  • asd131531
  • 2015-01-04 19:58
  • 3486

Linux Oracle下sqlplus无法使用命令退格删除和历史记录的解决方法(使用rlwrap)

近来因工作需要业余在学习oracle,发现通过SecureCRT或putty等SSH客户端远程登录Linux下oracle的sqplus时,输错字符后按Backspace键或Del键删除时,会出现^H...
  • linghao00
  • linghao00
  • 2013-04-19 10:19
  • 1185

SAP空格无法带出历史记录的解决办法

步骤1:打开SAP选择“选项”点击打开 步骤2:复制历史纪录目录地址 步骤3:关闭SAP客户端,打开我的电脑,将历史纪录目录地址黏贴到地址栏,回车 步骤4:删除H...
  • zhongguomao
  • zhongguomao
  • 2017-11-15 10:22
  • 380
    个人资料
    • 访问:21060次
    • 积分:246
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:0篇
    • 译文:0篇
    • 评论:15条
    文章分类
    文章存档
    最新评论