关于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;
}