fetchを使ってsubmit

HTMLのフォームのsubmitイベントで、JavaScriptのfetchを使用してPOSTリクエストを送信する方法を以下に示します。

1. 基本的なHTMLフォーム

HTMLファイルには最低限のフォームを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FetchでPOST送信</title>
</head>
<body>
    <h1>Fetchを使ったフォーム送信</h1>
    <form id="myForm">
        <label for="name">名前:</label><br>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">メールアドレス:</label><br>
        <input type="email" id="email" name="email" required><br><br>

        <button type="submit">送信</button>
    </form>

    <div id="response"></div>

    <script src="script.js"></script>
</body>
</html>

2. JavaScriptでfetchを使用してPOST

script.jsファイルでフォームのsubmitイベントをキャッチし、fetchを使用してPOSTリクエストを送信します。

document.addEventListener("DOMContentLoaded", () => {
    const form = document.getElementById("myForm");
    const responseDiv = document.getElementById("response");

    form.addEventListener("submit", async (event) => {
        event.preventDefault(); // デフォルトのフォーム送信を防止

        // フォームデータを取得
        const formData = new FormData(form);

        try {
            // FetchでPOST送信
            const response = await fetch("process.php", {
                method: "POST",
                body: formData,
            });

            if (response.ok) {
                const result = await response.text(); // サーバーのレスポンスを取得
                responseDiv.innerHTML = `<p>サーバーの応答: ${result}</p>`;
            } else {
                responseDiv.innerHTML = `<p>エラー: ${response.statusText}</p>`;
            }
        } catch (error) {
            responseDiv.innerHTML = `<p>リクエストエラー: ${error.message}</p>`;
        }
    });
});

3. サーバーサイドの処理

以下のprocess.phpで送信されたデータを処理します。

<?php
// フォームデータを取得
$name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8');
$email = htmlspecialchars($_POST['email'], ENT_QUOTES, 'UTF-8');

// サーバー側の応答
echo "受け取った名前: " . $name . "、メールアドレス: " . $email;
?>

4. ポイント解説

preventDefault(): フォームのデフォルト動作（ページリロード）を防ぎます。
FormData: フォームのデータを簡単に取得できます。
fetch: 非同期通信を行うための標準的なAPI。
サーバー側の応答を確認: サーバーが返すデータを利用して、画面上に結果を反映します。

5. 改善案

エラーハンドリング: サーバーエラー（例えば500エラー）をより詳細にユーザーに伝える。
JSON形式のやりとり: 以下のように、JSON形式でデータを送信し、レスポンスを受け取ることも一般的です。

JSONを使う場合の例

JavaScript

const jsonData = {
    name: formData.get("name"),
    email: formData.get("email"),
};

const response = await fetch("process.php", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify(jsonData),
});

PHP

$data = json_decode(file_get_contents("php://input"), true);
$name = htmlspecialchars($data['name'], ENT_QUOTES, 'UTF-8');
$email = htmlspecialchars($data['email'], ENT_QUOTES, 'UTF-8');

echo json_encode(["message" => "受け取った名前: $name、メールアドレス: $email"]);

これで、非同期で安全なフォーム送信が可能になります！