ajax请求多个页面数据,不刷新实现获取多个页面数据,下滑加载

功能描述

最近一直在做一个微信公众号的开发,用到部分数据的显示,需要请求多个页面的数据到本html。例如含有数据的页面是list2.html,list3.html,list4.html等,查询资料学习甚久,终于完成。本人新手,用来总结之用,高手勿喷。

源代码

                    var page=2;
                    var finished=0;
                    var sover=0;

                    var setdefult=setInterval(function (){
                    if(sover==1)
                        clearInterval(setdefult);   
                    else if($("#plush-ul").height()<$(window).height())
                        loadmore($(window));
                    else
                        clearInterval(setdefult);
                },500);



                    function loadmore(obj){
                        if(finished==0 && sover==0)
                        {
                            var scrollTop=$(obj).scrollTop();
                            var scrollHeight=$(document).height();
                            var windowHeight=$(obj).height();
                            var baseUrl=" 固定的url前缀";
                            //比如http://localhost:8080/html/list

                            if(scrollTop+windowHeight-scrollHeight<=50){
                                setTimeout(function(){
                                    page+=1;
                                    finished=0;                              
                                },1000);


                                 $.ajax({
                                          type:"get",
                                          url:baseUrl+page+".html",
                                          //当page=2时即http://localhost:8080/html/list2.html   依次调取list3.html,list4.html等
                                          dataType:'html',
                                          data:{},
                                          success:function(result){
                                            var backHtml=$(result).find("#plush-ul li")//选取所需页面的部分
                                            $("#hide").html(backHtml);//存储到本页面的空div
                                            $('#hide').hide();//另div隐藏
                                            $("#plush-ul").append(backHtml);//将获取数据到的加到本页数据之后
                                            $('#plush-ul').show();//将数据显示出来
                                             },

                                        });

                                 finished=1;
                            }
                        }
                    }
                     //页面滚动执行事件
                $(window).scroll(function (){
                    loadmore($(this));
                });

下滑加载模块 部分引用:http://www.86y.org/art_detail.aspx?id=752

猜你喜欢

转载自blog.csdn.net/qq_37950408/article/details/81233673
今日推荐