[ajax加载中]Ajax加载静态页面的例子

更新时间:2020-02-20    来源:Access    手机版     字体:

【www.bbyears.com--Access】


当手机网页过长时,可以将内容分块,用Ajax加载。

主要思路如下:将需要加载的页面存放在一个新的页面中,主要代码:

 
header("Access-Control-Allow-Origin: *");
header("Content-type: text/html; charset=utf-8");
echo "";
echo里面是需要加载的html。


然后在js初始化里面使用scroll函数时刻监听滚动条,判断滚动条距离顶部的距离,然后根据需要在适当的位置使用Ajax get数据,主要代码如下:

if(h>appheight){//滚动条的高度大于appbox的高度。调用Ajax获取下面的数据

                //ajax get方法

 

                if(flag==0){

                    $.get('http://192.168.1.138/zmitphone/AjaxweChatBox.php', function (response) {

//                        $(".weChatBox").remove(".loading");

                        $(".loadingwechat").hide();

                        $(".weChatBox").append(response)

                        console.log("success");

                        flag=1;

                    })

                }

                else{

//                    console.log(flag);

                    if(h>appheight+weChatheight){

                        if(flag==1){

                            $.get('http://192.168.1.138/zmitphone/ajaxWebBox.php', function (response) {

                                $(".loadingweb").hide();

                                $(".webBox").append(response)

                                console.log("success");

                                flag=2;

                            })

                        }

                        else{

                            console.log(flag);

                            if(h>appheight+weChatheight+webheight){

                                if(flag==2){

                                    $.get('http://192.168.1.138/zmitphone/ajaxSoftwareBox.php', function (response) {

                                        $(".loadingsoft").hide();

                                        $(".softwareBox").append(response)

                                        console.log("success");

                                        flag=3;

                                    })

                                }

                                else{

                                    console.log(flag);

                                    if(h>appheight+weChatheight+webheight+softwareheight){

                                        if(flag==3){

                                            $.get('http://192.168.1.138/zmitphone/ajaxSeoBox.php', function (response) {

                                                $(".loadingseo").hide();

                                                $(".seoBox").append(response)

                                                console.log("success");

                                                flag=4;

                                            })

                                        }

                                        else{

                                            console.log("全部加载完毕");

                                        }

                                    }

                                }

                            }

                        }

                    }

                }


因为滚动条一直在监听,但是到了指定位置只要加载一次数据就够了,这里可以设置一个flag,根据flag的值判断就可以了。如果想要添加一个加载提示,可以在需要添加的位置里面写一些提示文字,加载成功后,隐藏这个div就可以了。

本文来源:http://www.bbyears.com/shujuku/85298.html

热门标签

更多>>

本类排行