AJAXコールでJSON応答ヘッダーを設定します

M66 2025-05-18

ヘッダー関数でJSON応答ヘッダーを設定し、AJAXコールでデータを返す方法は？

Web開発では、特にAJAX呼び出しを使用しているときにデータが返される場合、フロントエンドとの非同期リクエストデータの相互作用を処理する必要があることがよくあります。ブラウザが返されたデータ形式を正しく処理できるようにするには、正しい応答ヘッダー情報を設定する必要があります。返されるデータが必要な場合はJSON形式で、PHPはHTTP応答ヘッダーを設定するHeader（）関数を提供します。この記事では、header（）関数を使用してJSON応答ヘッダーを設定し、JSONデータをAJAXで返す方法について説明します。

JSON応答ヘッダーのセットアップ

JSON形式のデータをクライアントに返すには、まず、HTTP応答ヘッダーのコンテンツタイプがアプリケーション/JSONに正しく設定されていることを確認します。このようにして、ブラウザは、HTMLやその他の形式ではなく、JSON形式でデータを受信することを知っています。

 <?php
// 応答ヘッダーを設定します，asのreturnデータ型を指定します 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);
    }
});

完全な例

以下は、Header（）関数を使用してJSON応答ヘッダーをセットアップし、フロントエンドのAJAXを介してデータを取得する方法を示す完全なPHPおよびAJAXの例を示します。

php（data.php）

 <?php
// 応答ヘッダーを設定します，asのreturnデータ型を指定します 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でアクセスコントロールアロウオリジン応答ヘッダーを設定する必要があります。
```
 header('Access-Control-Allow-Origin: *');
```
これにより、任意のドメインリクエストがAPIにアクセスすることができます。
エラー処理：JSON応答を処理するときは、HTTPステータスコードが200ではないかなど、フロントエンドが返されたエラー情報を正しく処理できることを確認してください。

正しい応答ヘッダーを設定し、AJAXを使用することにより、フロントエンドとバックエンドの間でJSONデータを効率的に渡すことができます。