Ajax載入靜態頁面的例子

當手機網頁過長時，可以將內容分塊，用Ajax載入。

主要思路如下：將需要載入的頁面存放在一個新的頁面中，主要代碼：

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

然後在js初始化裡面使用scroll函數時刻監聽捲軸，判斷捲軸距離頂部的距離，然後根據需要在適當的位置使用Ajax get資料，主要代碼如下：

<pre>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("全部載入完畢");                                        }                                    }                                }                            }                        }                    }                }</pre><pre>

因為捲軸一直在監聽，但是到了指定位置只要載入一次資料就夠了，這裡可以設定一個flag，根據flag的值判斷就可以了。如果想要添加一個載入提示，可以在需要添加的位置裡面寫一些提示文字，載入成功後，隱藏這個div就可以了。