欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-03 09:08:44
...

学习中偶然的机会了解到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;
	}