PHP MEMO

ajaxを使用してhtml側からサーバーにリクエストします。
サーバーではphpを使用して判定した結果をhtml側に送信します。
このサンプルではプリフライトリクエストの例となります。

[test2.html]
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Ajax Sample</title>
</head>
<body>

<h1>Retrieve User Information</h1>
	<button id="fetchButton">Get User Information</button>
    <div id="result"></div>

fetch(‘http:
        method: ‘POST’,
        headers: {
        ‘Content-Type’: ‘application/json’,
        },
        body: JSON.stringify({ id: 123 }),
    })
.then(response => {
    if (!response.ok) {
        throw new Error(‘Network error occurred’);
    }
    return response.json();
})
.then(data => {
    if (data.status === ‘success’) {
        resultDiv.innerHTML = `
	<p>Name: ${data.user.name}</p>
                <p>Age: ${data.user.age}</p>
            `;
        } 
        else 
        {
            resultDiv.textContent = `Error: ${data.message}`;
        }
    })
.catch(error => {
        console.error(‘Fetch error:’, error);
        resultDiv.textContent = `Request failed: ${error.message}`;
    });
});
</script>
</body>
</html>

copy

[test2.php]
//CORSを許可する
header("Access-Control-Allow-Origin: *"); // すべてのオリジンを許可（セキュリティ的に注意）
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

// プリフライトリクエストならここで終了
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
	http_response_code(200);
	exit;
}

// レスポンスの形式をJSONに設定
header('Content-Type: application/json');

// POSTされたJSONデータを取得
$json_data = file_get_contents("php://input");
$data = json_decode($json_data, true);

// データを検証
if (!isset($data['id'])) 
{
	echo json_encode(['status' => 'error', 'message' => 'ユーザーIDが指定されていません。']);
	exit;
}

$id = $data['id'];

// ダミーのデータ処理
if ($id === 123) 
{
	$user = [
		'name' => '山田 花子',
		'age' => 20
	];
	echo json_encode(['status' => 'success', 'user' => $user]);
} 
else 
{
	echo json_encode(['status' => 'error', 'message' => '指定されたユーザーが見つかりません。']);
}

copy

[test2.php]
// Allow CORS
header(“Access-Control-Allow-Origin: *”); // Allow all origins (security caution)
header(“Access-Control-Allow-Methods: POST, GET, OPTIONS”);
header(“Access-Control-Allow-Headers: Content-Type”);

// Exit here if it's a preflight request
if ($_SERVER[‘REQUEST_METHOD’] === ‘OPTIONS’) {
    http_response_code(200);
    exit;
}

// Set response format to JSON
header(‘Content-Type: application/json’);

// Get the posted JSON data
$json_data = file_get_contents(“php://input”);
$data = json_decode($json_data, true);

// Validate the data
if (!isset($data[‘id’])) 
{
    echo json_encode([‘status’ => ‘error’, ‘message’ => ‘User ID is not specified.’]);
	exit;
}

$id = $data[‘id’];

// Dummy data processing
if ($id === 123) 
{
    $user = [
        ‘name’ => ‘Hanako Yamada’,
        ‘age’ => 20
    ];
	echo json_encode([‘status’ => ‘success’, ‘user’ => $user]);
} 
else 
{
    echo json_encode([‘status’ => ‘error’, ‘message’ => ‘The specified user was not found.’]);
}

header("Access-Control-Allow-Methods: POST, GET, OPTIONS");

このサンプルではhtml側からPOSTを使用して処理しています。

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
http_response_code(200);
exit;
}

HTTPレスポンスコードの200はクライアントからのリクエストがサーバーによって
正常に処理されたことを示す値です。

header('Content-Type: application/json');

プリフライトリクエスト
html側でjavascriptの処理でContent-Typeがapplication/jsonと設定しているため
プリフライトが発生します。
プリフライトリクエストは異なるオリジン感でリソースを共有するための仕組みです。

$json_data = file_get_contents("php://input");

POSTされたJSONデータを取得します。

$data = json_decode($json_data, true);

取得したデータをphp用のデータにデコードします。

if (!isset($data['id']))

データが正しく入っているか？を検証しています。

echo json_encode(['status' => 'success', 'user' => $user]);

html側に準備したデータを返します。