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

最新推荐文章于 2021-08-06 09:57:38 发布

qq_32259579

最新推荐文章于 2021-08-06 09:57:38 发布

阅读量1.2k

点赞数

分类专栏： web 文章标签： ajax 历史回退加载更多 ajax html5

本文链接：https://blog.csdn.net/qq_32259579/article/details/73498479

版权

web 专栏收录该内容

6 篇文章 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;
	}