jQuery AJAX POST 請求完整實戰教學（含 PHP 後端範例）

前後端分離架構下，$.post() 是最常用的非同步資料交互方式。本文從參數解析、前端實作、後端配合到除錯技巧，完整呈現一個標準的 AJAX POST 流程。

$.post() 方法簽名詳細解析

$.post(url, [data], [callback], [type])

後端 PHP 範例（回傳 JSON）

testPost.php

<?php
header('Content-Type: application/json; charset=utf-8');
// 簡單示範：接收 name 參數並原樣回傳
$response = ['name' => $_POST['name'] ?? ''];
echo json_encode($response);
?>

前端完整 HTML + JS 實作

ajax.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery AJAX POST 示範</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <form id="demoForm">
        <input type="text" name="name" id="name" placeholder="輸入姓名" required>
        <button type="submit" id="sub">提交</button>
    </form>
    <h2>伺服器回傳內容：</h2>
    <div id="result"></div>

    <script>
    $(document).ready(function() {
        $('#demoForm').on('submit', function(e) {
            e.preventDefault(); // 阻止表單傳統提交
            $.post('testPost.php', 
                { name: $('#name').val() }, 
                function(data, textStatus) {
                    $('#result')
                        .append('data: ' + data.name + '<br>')
                        .append('textStatus: ' + textStatus + '<br>');
                }, 
                'json' // 明確指定期望 JSON，jQuery 會自動 parse
            );
        });
    });
    </script>
</body>
</html>

執行流程圖解

1. 使用者輸入文字 → 點擊提交
2. JS 攔截 submit 事件 → 發送 POST 請求至 testPost.php
3. PHP 接收 $_POST['name'] → json_encode 回傳
4. jQuery 自動解析 JSON → 觸發 callback → 更新 DOM 顯示結果

進階技巧與常見坑點

1. 錯誤處理（必加）

.fail(function(xhr, status, error) {
    console.error('AJAX 失敗：', status, error);
    $('#result').append('❌ 請求失敗：' + error);
});

2. 發送 JSON 格式資料（非表單編碼）

$.ajax({
    url: 'api/user',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ name: 'John', age: 25 }),
    dataType: 'json',
    success: handleResponse
});

3. 防止 CSRF 攻擊

在 $.ajaxSetup() 中統一攜帶 Token：

$.ajaxSetup({
    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
});

4. 取消請求

var xhr = $.post(...);
// 需要時呼叫
xhr.abort();

總結

$.post() 是 $.ajax() 的簡寫，適合簡單 POST 場景。複雜需求（自定 Header、檔案上傳、進度監聽、取消請求）請直接使用 $.ajax() 或現代 fetch API。記住：永遠在後端設定 Content-Type: application/json 並在前端指定 dataType: 'json'，避免解析失敗。