ajax加载列表 当点击进入详细页再次返回列表定位到当前点击位置解决办法

前端之家收集整理的这篇文章主要介绍了ajax加载列表 当点击进入详细页再次返回列表定位到当前点击位置解决办法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

当我们在加载数据点击更多是,进入详细页面然后在返回列表页还要回来上次浏览的位置。网上也看到好多,都是三严两语。

不多对我的的启发也是很大。再次也多些网友的启发。不多说直接上如何操作。

我的方法主要是 cookie 结合 sessionStorage来完成。

1、sessionStorage 存储ajax加载的html数据

//加载更多是保存SessionStorage(浏览项目异步加载的数据)

在js中声明全局变量var ProjectListAjaxData=‘’用来存储ajax加载数据 ”;(请看下面加载更多)
ProjectListAjaxData = ProjectListAjaxData + data;
sessionStorage.setItem("ProjectListAjaxData",ProjectListAjaxData);

2、@R_510_404@面时,记录页面滚动距离顶部的位置。(请看下边js)

//页面滚动获取滚动条距离顶部的距离
$(".page-content").on('scroll',function (event) {
temscrolltop = $(event.target).scrollTop();
//$.cookie(str,top,{ path: '/' });
//return $.cookie(str);
})
//跳转详细页面就记录一个(cookie)标记,代表是从详细页跳转
$.cookie("ProjectListPosition","position",{ path: '/' });

 
 
 
 
 
 //引用cookie的js
<script src="/_static/JS/jquery.cookies.1.4.1.min.js?v=<%=Common.SysConfig.JsVersion %>"
        type="text/javascript"></script>

<script type="text/javascript">
	//声明当前列表页面距离顶部的高度
        var temscrolltop = 0;
        var str = "ProjectListscrollTop";//定义距离顶部的高度存储Cookie的名字
	//获取保存好的Ajax加载的数据,如果不存在,赋值为空
        var ProjectListAjaxData = sessionStorage.getItem("ProjectListAjaxData");
        if (ProjectListAjaxData == null) {
            ProjectListAjaxData = "";
        }


        $(document).ready(function () {
            //判断返回的页面是不是详细页面
            if ($.cookie("ProjectListPosition")) {
                //使用完马上删除
                delCookie("ProjectListPosition");
                //页面回跳插入ajax加载 data 
                if (ProjectListAjaxData != null && ProjectListAjaxData != "") {
                    $(".comment-list").append(ProjectListAjaxData);
                }
                else {
                    ProjectListAjaxData = "";
                }


                //页面跳页码重新赋值为最后翻页页码
                if ($.cookie("ProjectListPageIndex")) {
                    $(".h_pageindex").attr("pi-status",$.cookie("ProjectListPageIndex"));
                }
                //页面回跳跳转的位置
                if ($.cookie(str)) {
                    $(".page-content").animate({ scrollTop: $.cookie(str) },0);
                }
                else {
                }
            }
            else {
                delCookie("ProjectListPosition");
                delCookie("ProjectListPageIndex");
                delCookie("ProjectListscrollTop");
                //清除缓存页面数据session
                ProjectListAjaxData = "";
                sessionStorage.removeItem("ProjectListAjaxData");
            }
            
	   //点击加载更多进行分页
            $(".content-more").click(function () {
                if ($(this).attr("data-status") == "1") {
                    return;
                }


                var pageindex = $(".h_pageindex").attr("pi-status");
                pageindex++;
                $(".content-more").html("加载中");
                $.ajax({
                    type: "get",dataType: "text",url: "/AsynPage/AsynDPProjectList.aspx",data: "type=" + strProjectIndustry + "&prid=" + strPrid + "&siteid=" + strSiteID + "&title=" + strProjectTitle + "&sort=" + strSort + "&pi=" + pageindex,success: function (data) {
                        if (data.replace(/\s/g,'').length == 0) {
                            $(".content-more").html("没有更多");
                            $(".content-more").attr("data-status","1");


                        } else {
                            $(".h_pageindex").attr("pi-status",pageindex);
                            $(".comment-list").append(data);
                            $(".content-more").html("查看更多");


                            //加载更多是保存SessionStorage(浏览项目异步加载的数据)
                            $.cookie("ProjectListPageIndex",pageindex,{ path: '/' });//记录翻页的页数
                            ProjectListAjaxData = ProjectListAjaxData + data;
                            sessionStorage.setItem("ProjectListAjaxData",ProjectListAjaxData);


                        }
                    }
                });
            });   

        });


    </script>



<script type="text/javascript">
            
            $(document).ready(function () {
                //点击@R_510_404@面记录滚动距离cookie
                $(".comment-porject").on('click',function () {
                    $.cookie(str,temscrolltop,{ path: '/' });
                });
            });


            //页面滚动获取滚动条距离顶部的距离
            $(".page-content").on('scroll',function (event) {
                temscrolltop = $(event.target).scrollTop();
                //$.cookie(str,{ path: '/' });
                //return $.cookie(str);
            })
	//写cookies
	function setCookie(days,name,value) {
    		var exp = new Date();
    		exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
    		document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + "; path=/";
	}
	//读取cookies
	function getCookie(name) {
    		var arr,reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
   		 if (arr = document.cookie.match(reg)) return unescape(arr[2]);
    		else return null;
	}	
	//删除cookies
	function delCookie(name) {
    		var exp = new Date();
    		exp.setTime(exp.getTime() - 1);
    		var cval = getCookie(name);
    		if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() + "; path=/";
	}
</script>

猜你在找的Ajax相关文章