PHP + jQuery AJAX 實現 JSON 數據交互完整實例

核心原理

利用 jQuery 的 $.ajax() 或 $.post() 方法，前端將表單數據序列化為 JSON 發送至 PHP 後端，後端處理後返回 JSON 響應，前端解析渲染頁面，實現無刷新數據交互。

完整代碼實現

前端頁面 (index.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AJAX JSON 交互演示</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
    <div id="result">等待提交...</div>
    <form id="myForm">
        <p><label>姓名：</label> <input type="text" name="username" required></p>
        <p><label>年齡：</label> <input type="number" name="age" required></p>
        <p><label>工作：</label> <input type="text" name="job" required></p>
    </form>
    <button id="sendBtn">提交數據</button>

    <script>
    $(function() {
        $("#sendBtn").click(function() {
            // 方法一：serialize() 序列化表單
            var formData = $("#myForm").serialize();
            
            $.ajax({
                url: 'process.php',
                type: 'POST',
                dataType: 'json',
                data: formData,
                success: function(response) {
                    var html = "姓名：" + response.username + 
                               " | 年齡：" + response.age + 
                               " | 工作：" + response.job;
                    $("#result").html(html);
                },
                error: function(xhr) {
                    $("#result").html("請求失敗：" + xhr.statusText);
                }
            });
        });
    });
    </script>
</body>
</html>

後端處理 (process.php)

<?php
header("Content-Type: application/json; charset=utf-8");

// 接收 POST 數據
$username = isset($_POST['username']) ? trim($_POST['username']) : '';
$age      = isset($_POST['age']) ? intval($_POST['age']) : 0;
$job      = isset($_POST['job']) ? trim($_POST['job']) : '';

// 構建響應數組
$response = [
    'username' => $username,
    'age'      => $age,
    'job'      => $job
];

// 輸出 JSON
echo json_encode($response, JSON_UNESCAPED_UNICODE);
?>

替代方案：使用 $.post() 簡寫

$.post('process.php', {
    username: $("input[name='username']").val(),
    age: $("input[name='age']").val(),
    job: $("input[name='job']").val()
}, function(data) {
    // data 已自動解析為對象（需確保 dataType: 'json' 或服務端正確設置 Header）
    $("#result").html("姓名：" + data.username + " | 年齡：" + data.age + " | 工作：" + data.job);
}, 'json');

關鍵要點總結

• dataType: 'json'：告訴 jQuery 自動解析響應為 JavaScript 對象
• header('Content-Type: application/json')：PHP 必須設置正確響應頭
• JSON_UNESCAPED_UNICODE：防止中文被轉義為 Unicode 編碼
• 錯誤處理：始終添加 error 回調提升用戶體驗

進階應用場景

此模式廣泛應用於：表單驗證、數據分頁加載、即時搜索建議、購物車操作、用戶註冊檢查等前後端分離交互場景。