Bootstrap Table POST 參數從 JSON 格式轉為 application/x-www-form-urlencoded 方案

問題描述

Bootstrap Table 默認將 queryParams 返回的對象序列化為 JSON 字符串（{"page":1,"rows":10}）作為請求體發送，後端若期望傳統表單格式（page=1&rows=10）會解析失敗。

解決方案對比

方案一：客戶端序列化為鍵值對字符串（推薦）

$('#table').bootstrapTable({
    method: 'post',
    contentType: 'application/x-www-form-urlencoded', // 關鍵：設置 Content-Type
    queryParams: function(params) {
        // params 已包含 pageNumber, pageSize 等內置參數
        // 直接返回對象，jQuery 會自動按 contentType 序列化
        return {
            page: params.pageNumber,
            rows: params.pageSize,
            // 其他業務參數...
        };
    }
});

原理：jQuery $.ajax 根據 contentType 決定序列化方式，設置為 application/x-www-form-urlencoded 時會調用 $.param() 將對象轉為 key=val&key2=val2 格式。

方案二：手動構建查詢字符串

queryParams: function(params) {
    return $.param({
        page: params.pageNumber,
        rows: params.pageSize
    }); // 返回已編碼的字符串
},
contentType: 'application/x-www-form-urlencoded'

方案三：後端兼容 JSON 請求體（Spring MVC 示例）

@PostMapping("/list")
public ResponseEntity<PageResult> list(@RequestBody QueryParams params) {
    // 直接接收 JSON 對象，無需前端改動
}

需確保請求頭 Content-Type: application/json（Bootstrap Table 默認行為）。

常見坑點提醒

• contentType 必須與序列化方式匹配：若返回對象但 contentType 為 form，jQuery 會自動轉換；若手動返回字符串，contentType 必須一致。
• 參數名映射：Bootstrap Table 內置參數為 pageNumber/pageSize（或 offset/limit），需按後端約定映射為 page/rows。
• GET 請求無請求體：若 method: 'get'，參數會拼接在 URL 後，contentType 無效。

調試技巧

1. 打開瀏覽器 Network 面板，查看 Request Payload / Form Data 實際發送格式
2. 後端打印原始請求體（request.getInputStream()）確認解析結果