搭配AJAX 調用設置JSON 響應頭

M66 2025-05-18

怎麼用header 函數設置JSON 響應頭，配合AJAX 調用返回數據？

在Web 開發中，常常需要處理與前端的異步請求數據交互，尤其是在使用AJAX 調用時返回數據時。為了確保瀏覽器能夠正確處理返回的數據格式，我們需要設置正確的響應頭信息。如果我們希望返回的數據是JSON 格式，PHP 提供了header()函數來設置HTTP 響應頭。本文將介紹如何使用header()函數設置JSON 響應頭，並與AJAX 一起返回JSON 數據。

設置JSON 響應頭

要向客戶端返回JSON 格式的數據，首先要確保HTTP 響應頭中正確地設置了Content-Type為application/json 。這樣瀏覽器就會知道它將收到的是JSON 格式的數據，而不是HTML 或其它格式。

 <?php
// 設置響應頭，指定返回數據類型為 JSON
header('Content-Type: application/json');

// 創建一個關聯數組，表示要返回的數據
$response = array(
    'status' => 'success',
    'message' => 'Data has been successfully processed.'
);

// 使用 json_encode() 函數將數組轉換為 JSON 格式
echo json_encode($response);
?>

結合AJAX 調用

當設置了正確的JSON 響應頭後，接下來可以通過AJAX 調用來獲取返回的JSON 數據。假設前端使用JavaScript 的fetch()函數或jQuery 的$.ajax()來發送請求並接收數據。以下是使用fetch()發送請求並處理JSON 響應的示例：

使用fetch()發送AJAX 請求

fetch('http://m66.net/api/data.php', {
    method: 'GET'
})
.then(response => response.json()) // 解析 JSON 數據
.then(data => {
    console.log(data);  // 在控制台输出返回的數據
})
.catch(error => console.error('Error:', error));

使用jQuery 的$.ajax()發送請求

$.ajax({
    url: 'http://m66.net/api/data.php',
    type: 'GET',
    dataType: 'json',  // 指定返回的數據类型为 JSON
    success: function(data) {
        console.log(data);  // 在控制台输出返回的數據
    },
    error: function(xhr, status, error) {
        console.error('Error:', error);
    }
});

完整示例

下面是一個完整的PHP 和AJAX 示例，展示如何使用header()函數設置JSON 響應頭並在前端通過AJAX 獲取數據：

PHP (data.php)

 <?php
// 設置響應頭，指定返回數據類型為 JSON
header('Content-Type: application/json');

// 創建一個關聯數組，表示要返回的數據
$response = array(
    'status' => 'success',
    'message' => 'Data has been successfully processed.',
    'data' => array('item1', 'item2', 'item3')
);

// 使用 json_encode() 函數將數組轉換為 JSON 格式
echo json_encode($response);
?>

JavaScript (前端)

 fetch('http://m66.net/api/data.php', {
    method: 'GET'
})
.then(response => response.json()) // 解析 JSON 數據
.then(data => {
    console.log(data);  // 在控制台输出返回的數據
})
.catch(error => console.error('Error:', error));

注意事項

確保JSON 格式正確：在PHP 中返回的數據應該是有效的JSON 格式。你可以使用json_encode()函數將PHP 數組轉換為JSON 格式的字符串。
CORS 問題：如果前端和後端不在同一個域名下，可能會遇到跨域資源共享（CORS）的問題。你需要在PHP 中設置Access-Control-Allow-Origin響應頭來允許跨域請求：
```
 header('Access-Control-Allow-Origin: *');
```
這將允許任何域名的請求訪問你的API。
錯誤處理：在處理JSON 響應時，確保前端能夠正確處理返回的錯誤信息，比如HTTP 狀態碼不為200 的情況。

通過設置正確的響應頭和使用AJAX，我們可以在前後端之間高效地傳遞JSON 數據。