摘要：

繼上一篇《$.ajax+php實戰教程之下拉時自動加載更多文章原理分析》文章進行進一步講解，完善之前的代碼及引入ajax和php相關內容......

上次留下的問題不知道看官們有沒有解決，沒有解決的看下面的答案吧。

4.4、自動加載思路

我們在4.1中已經可以判斷出滾動條是否快到拉到底部，在4.2中我們又做出了點擊事件和加載“數據”的步驟，所以我們這個自動加載可以將4.1和4

2結合起來。也就是說：當滾動條快拉到底部時，我們讓它去觸發點擊事件。

4.5、自動加載源碼

4.5.1、完整jquery代碼

$(window).scroll(function(){

var t=$(this).scrollTop();/*獲取滾動時距離瀏覽器頂部的值*/

var h=$(this).height();/*獲取當前窗口的高度*/

var h1=$('#ylsj-load').offset().top;/*獲取按鈕距離瀏覽器頂部的值*/

/*用按鈕的值-滾動條的值與窗口高度進行比較，如果小時，則表示按鈕進入可視區，同時也表示滾動條即將到達底部*/

if(h1-t

/*這里將之前的彈窗改成點擊事件*/

$('#ylsj-load').click();

}

});

var i=0;

$('#ylsj-load').click(function(){

i++;

$(this).before('

加載的數據外框架，已加載'+i+'次');

});

案例欣賞：

怎么樣，是不是有點感覺了？

接下來我們繼續向下進行。

五、使用ajax發送請求

5.1、ajax格式

這個ajax的話呢，其實也不是多難，我們還是要先寫好框架，然后再進行替換上面的代碼。

5.1.1、ajax發送請求代碼

$.ajax({

type:"/*類型，post或get*/",

url:'要請求的php文件地址',

data:{/*要傳遞的參數*/},

dataType:"/*數據類型，html、json、xml等*/",

success:function(data){

/*成功時返回數據*/

},error:function(jqXHR){

/*失敗時進行提示*/

}

});

上面的代碼怎么用呢？

其實我們只要稍微思考下就行了。上面是代碼，代碼需要去執行啊！既然是需要去執行，那什么時候才去執行呢？？？

當然是點擊的時候去觸發ajax了！好，我們繼續來完善我們的代碼。

5.2、ajax和jquery進行結合

5.2.1、ajax和jquery進行結合

var i=0;/*定義一個變量，等會用來控制多次觸發*/

$(window).scroll(function(){

var t=$(this).scrollTop();/*獲取滾動時距離瀏覽器頂部的值*/

var h=$(this).height();/*獲取當前窗口的高度*/

var h1=$('#ylsj-load').offset().top;/*獲取按鈕距離瀏覽器頂部的值*/

/*用按鈕的值-滾動條的值與窗口高度進行比較，如果小時，則表示按鈕進入可視區，同時也表示滾動條即將到達底部*/

if(h1-t

if(i==0){/*防止快速下拉時多次觸發*/

i=1;/*改變i的值*/

/*這里將之前的彈窗改成點擊事件*/

$('#ylsj-load').click();

}

}

});

$('#ylsj-load').click(function(){

/*將原來這里的內容替換成ajax動態獲取數據*/

$.ajax({

type:"/*類型，post或get*/",

url:'要請求的php文件地址',

data:{/*要傳遞的參數*/},

dataType:"/*數據類型，html、json、xml等*/",

success:function(data){

/*成功時返回數據*/

i=0;/*然后恢復狀態，否則繼續下拉時不能繼續執行*/

},error:function(jqXHR){

/*失敗時進行提示*/

}

});

});

上面的代碼中還有一些參數沒有修改，因為這些參數要根據我們接下來的php進行修改。

六、php文件

6.1、分析php文件做什么事情

這個php文件里面有什么內容呢？具體內容還是要根據我們具體的案例來進行寫代碼。

舉個例子：我們要做一個下拉時自動加載文章的效果。既然是加載文章，所以我們需要知道以下這些數據：文章標題、文章簡介、文章縮略圖、發表日期、來源網站、作者、閱讀量、評論數等等。這些數據都需要通過這個php文件傳遞給我們上面的ajax。

6.2、sql語句查詢信息

既然是傳遞數據，我們就需要去查詢數據。不可能說直接把信息寫死，這是不現實的！所以，這個php文件中還要有我們的sql語句。

哦賣糕的！前面的jquery還能稍微理解，后面的ajax完全不能理解，更不用提什么php和sql查詢了。想必部分看官會有這樣的感想。

那怎么辦呢？按照文章思路去學習對應的知識唄！如果只知道copy代碼而不知道原理及流程的話，換個地方又不會使用了。

七、最后

下拉時自動加載的原理大致就是這樣，對于源碼，基本上是大同小異。下次藝靈將會調用幾個網站管理系統中的數據來做成插件，到時需要的看官可根據自己的需求進行下載對應的插件。

----------完----------

轉載聲明：

若親想轉載本文到其它平臺，請務必保留本文出處！

本文鏈接：http://www.yilingsj.com/jquery/2016-05-18/397.html

若親不想直保留地址，含蓄保留也行。藝靈不想再看到有人拿我的技術文章到他的地盤或者是其它平臺做教(裝)程(B)而不留下我的痕跡。文章你可以隨便轉載，隨便修改，但請尊重藝靈的勞動成果！謝謝理解。

總結

以上是生活随笔為你收集整理的php 实现自动加载更多,$.ajax+php实战教程之下拉时自动加载更多文章原理分析二...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。