ThinkPHP AJAX 分頁與選單聯動實作：GET/POST 差異排查與 URL 一致性原則

功能架構

• 分類選單：點擊分類 → AJAX 載入對應商品列表
• 分頁導航：點擊頁碼 → AJAX 載入該頁資料
• 核心原則：選單與分頁請求 URL 格式、參數名、HTTP Method 必須一致

前端 JavaScript 實作

分類選單 AJAX

<script>
function loadCategory(cid) {
    $.ajax({
        url: "{:U('Product/list')}",  // 統一入口
        type: "GET",                   // 關鍵：分頁也是 GET，這裡必須一致
        data: { cid: cid, page: 1 },   // 重置第 1 頁
        dataType: "html",
        beforeSend: function() {
            $('#content').html('
載入中...
');
        },
        success: function(html) {
            $('#content').html(html);
        }
    });
}
</script>

分頁連結攔截 (事件委派)

<script>
$(document).on('click', '#pagination a', function(e) {
    e.preventDefault();
    var url = $(this).attr('href');   // 取得分頁連結完整 URL (含 cid、page 參數)
    
    $('#content').append('載入中...');
    
    $('#content').load(url, function() {
        $('#loading').remove();
        // 重新綁定事件 (若內容含新分頁連結)
    });
});
</script>

後端控制器統一處理

<?php
class ProductController extends Controller {
    public function list() {
        $cid = I('get.cid', 0, 'intval');
        $page = I('get.page', 1, 'intval');
        $pageSize = 20;
        
        $where = ['status' => 1];
        if ($cid > 0) $where['cid'] = $cid;
        
        $count = M('Product')->where($where)->count();
        $Page = new \Think\Page($count, $pageSize);
        $Page->setConfig('theme', '%FIRST% %UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END% %HEADER%');
        
        // 關鍵：分頁連結必須保留 cid 參數
        $Page->parameter = "cid=$cid";
        
        $list = M('Product')
            ->where($where)
            ->order('sort desc, id desc')
            ->limit($Page->firstRow . ',' . $Page->listRows)
            ->select();
        
        $this->assign('list', $list);
        $this->assign('page', $Page->show());
        
        // AJAX 請求回傳片段，非 AJAX 回傳完整頁面
        if (IS_AJAX) {
            $this->display('Product:ajax_list'); // 只含列表+分頁的模板
        } else {
            $this->display(); // 完整頁面含選單
        }
    }
}
?>

關鍵坑點：GET vs POST 不一致

最佳實務總結

1. 統一用 GET：分頁本質是「獲取資源」，符合 REST 語義，瀏覽器前進後退、書籤、分享皆正常
2. URL 參數完整：分頁連結必須包含所有篩選條件 (`cid`, `keyword`, `price_range` 等)
3. 後端統一入口：選單、分頁、搜尋共用同一 Action，邏輯集中維護
4. 模板分離：`IS_AJAX` 判斷回傳片段或完整頁面，避免重複代碼
5. Loading 狀態：提升使用者體驗，防止重複點擊

進階：Pjax 無刷新體驗

<script>
// 使用 jQuery Pjax 自動處理 AJAX + pushState
$(document).pjax('#category-menu a, #pagination a', '#content', {
    fragment: '#content',  // 只提取目標容器
    timeout: 5000,
});
</script>

後端配合 `if (IS_AJAX) $this->display('ajax_list');` 即可，瀏覽器網址列同步更新，支援前進後退。