jQuery+Ajax+PHP無刷新分頁

Kosmos 發布于2019-06-27 15:43 / 1586人閱讀

摘要：下載演示地址本文使用，通過實例講解如何實現無刷新分頁效果。當數據完全加載完畢后，調用函數生成分頁，也可用程序來實現分頁。頁面可在分頁的屬性中獲取。

下載演示地址：http://www.erdangjiade.com/js...
本文使用jQuery+Ajax+PHP+Mysql，通過實例講解如何實現Ajax無刷新分頁效果。


    
    
#ul_lists以列表的形式展現數據，信息包括商品圖片和標題
CSS.lists{width:740px;  margin:30px auto 0; position:relative}
#ul_lists li{float:left;width:220px;height:240px;margin:0 6px 6px;border:1px solid #ffffd;padding:5px;overflow:hidden}
#ul_lists li img{width:220px; height:220px;margin:0 0 6px}
.page{ margin:12px 0 20px;  text-align:center}
.page span{margin:5px; font-size:14px}jQuery首先聲明全局變量，后面分頁用到。
var page_cur = 1; //當前頁
var total_num, page_size, page_total_num;//總記錄數,每頁條數,總頁數接著通過函數getData() 獲取當前頁數據。我們利用$.ajax GET方式把參數page以json格式傳到ajax.php。
function getData(page) { //獲取當前頁數據
    $.ajax({
        type: "GET",
        url: "ajax.php",
        data: {
            "page": page - 1
        },
        dataType: "json",
        success: function(json) {
            $("#ul_lists").empty();
            total_num = json.total_num; //總記錄數
            page_size = json.page_size; //每頁數量
            page_cur = page; //當前頁
            page_total_num = json.page_total_num; //總頁數
            var li = "";
            var list = json.list;
            $.each(list,
            function(index, array) { //遍歷返回json
                li += "" + array["title"] + "";
            });
            $("#ul_lists").append(li);
        },
        complete: function() {
            getPageBar(); //js生成分頁，可用程序代替
        },
        error: function() {
            alert("數據異常,請檢查是否json格式");
        }
    });
}每次請求返回的商品放置在#ul_lists中。當數據完全加載完畢后，調用函數getPageBar()生成分頁，也可用程序來實現分頁。
function getPageBar() { //js生成分頁
    if (page_cur > page_total_num) page_cur = page_total_num; //當前頁大于最大頁數
    if (page_cur < 1) page_cur = 1; //當前頁小于1
    page_str = "共" + total_num + "條" + page_cur + "/" + page_total_num + "";
    if (page_cur == 1) { //若是第一頁
        page_str += "首頁上一頁";
    } else {
        page_str += "首頁上一頁";
    }
    if (page_cur >= page_total_num) { //若是最后頁
        page_str += "下一頁尾頁";
    } else {
        page_str += "下一頁尾頁";
    }
    $("#page").html(page_str);
}最后，當頁面第一次加載時，我們加載第一頁數據即getData(1)，當點擊分頁條中的分頁鏈接時，通過getData(page)加載對應頁碼的數據。頁面page可在分頁的屬性data-page中獲取。
$("#page a").live("click",function() { //live 向未來的元素添加事件處理器,不可用bind
    var page = $(this).attr("data-page"); //獲取當前頁
    getData(page)
});PHPajax.php接收每次前端頁面的ajax請求，根據提交的頁碼page,計算總記錄數和總頁數，讀取對應頁碼下的數據列表，并將結果以JSON格式返回給前端頁面。
include_once("connect.php");

$page = intval($_GET["page"]); //當前頁
$total_num = mysql_num_rows(mysql_query("select id from goods")); //總記錄數

$page_size = 6; //每頁數量
$page_total = ceil($total_num / $page_size); //總頁數
$page_start = $page * $page_size;

$arr = array("total_num" = >$total_num, "page_size" = >$page_size, "page_total_num" = >$page_total, );
$query = mysql_query("SELECT id,title,pic FROM goods ORDER BY ID ASC LIMIT $page_start,$page_size");
while ($row = mysql_fetch_array($query)) {
    $arr["list"][] = array("id" = >$row["id"], "title" = >$row["title"], "pic" = >$row["pic"], );
}

echo json_encode($arr);最后附上goods表結構，下載壓縮包里也有哦~。
CREATE TABLE IF NOT EXISTS `goods` (  
  `id` int(8) NOT NULL AUTO_INCREMENT,  
  `title` varchar(80) NOT NULL,  
  `pic` varchar(255) NOT NULL,  
  PRIMARY KEY (`id`)  
) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 


  [1]: http://www.erdangjiade.com/js/2.html
  [2]: /img/bVKyOj

下載演示地址：http://www.erdangjiade.com/js...

云服務器 GPU云服務器無刷新ajax分頁無刷新分頁 Ajax無刷新 ajax無刷新頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/22513.html

jQuery+Ajax+PHP無刷新分頁

摘要：下載演示地址本文使用，通過實例講解如何實現無刷新分頁效果。當數據完全加載完畢后，調用函數生成分頁，也可用程序來實現分頁。頁面可在分頁的屬性中獲取。下載演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通過實例講解如何實現Ajax無刷新分頁效果。 #ul_lists以列表的形式展現數據，信...

wangzy2019 2019-08-21 11:38 評論0 收藏0
jQuery+Ajax+PHP無刷新分頁

摘要：下載演示地址本文使用，通過實例講解如何實現無刷新分頁效果。當數據完全加載完畢后，調用函數生成分頁，也可用程序來實現分頁。頁面可在分頁的屬性中獲取。下載演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通過實例講解如何實現Ajax無刷新分頁效果。 #ul_lists以列表的形式展現數據，信...

lauren_liuling 2019-08-14 17:46 評論0 收藏0
jQuery+Ajax+PHP無刷新分頁

摘要：下載演示地址本文使用，通過實例講解如何實現無刷新分頁效果。當數據完全加載完畢后，調用函數生成分頁，也可用程序來實現分頁。頁面可在分頁的屬性中獲取。下載演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通過實例講解如何實現Ajax無刷新分頁效果。 #ul_lists以列表的形式展現數據，信...

mengbo 2019-08-01 16:30 評論0 收藏0
一步步實現thinkphp上的ajax無刷新分頁

摘要：信息列表循環賦值分頁信息部分這一步是實現無刷新分頁的重點，用到了的通信，通過與數據庫的交互，將獲取到的數據寫到模板中，替換掉之前的數據集，達到分頁的目的。前言 thinkphp框架自帶的分頁類是每次翻頁都要刷新一下整個頁面，這種翻頁的用戶體驗顯然是不太理想的，我們希望每次翻頁只刷新我們想要的數據集部分的數據，這樣我們很容易想到ajax異步通信，用ajax與數據庫（本人在開發過程中使用...

張遷 2019-06-27 14:04 評論0 收藏0