SQL見るだけクエリ#98 JavaScriptのFetch APIでPHPに文字を渡す方法 その2

記入日：2023-04-16　編集日：2023-04-16

JavaScriptのFetch APIでPHPに文字を渡す方法 その2 前回とは別の角度で解説してみようと思います。

Fetch APIを使用してJavaScriptからPHPに文字を渡す

例えば、以下のようなHTMLのフォームがあるとします。

<form id="myForm">
  <input type="text" id="name" name="name" placeholder="名前">
  <input type="text" id="age" name="age" placeholder="年齢">
  <input type="text" id="city" name="city" placeholder="都市">
  <button type="submit">送信</button>
</form>

JavaScriptを使用してフォームのデータを取得し、Fetch APIを使ってPHPに送信する例を以下に示します。

// フォームの送信イベントをキャプチャ
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // フォームのデフォルトの送信を防止

  // フォームデータを取得
  const formData = new FormData(event.target);
  
  // Fetch APIを使ってPHPにPOSTリクエストを送信
  fetch('example.php', {
    method: 'POST', // POSTリクエストを使用
    body: formData // FormDataオブジェクトをリクエストボディに含める
  })
  .then(response => {
    // レスポンスを処理
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.text(); // レスポンスをテキスト形式で取得
  })
  .then(data => {
    // レスポンスデータを処理
    console.log(data);
  })
  .catch(error => {
    // エラーを処理
    console.error(error);
  });
});

PHPのコード (example.php):

// POSTリクエストのボディからデータを取得
$name = $_POST['name'];
$age = $_POST['age'];
$city = $_POST['city'];

// 受け取ったデータを処理する
echo "Received data from JavaScript:<br>";
echo "Name: " . $name . "<br>";
echo "Age: " . $age . "<br>";
echo "City: " . $city . "<br>";

この例では、JavaScriptのFetch APIを使用してフォームデータを取得し、PHPのexample.phpにPOSTリクエストを送信しています。PHPのexample.phpでは、$_POSTグローバル変数を使用してリクエストボディからデータを取得し、受け取ったデータを処理してレスポンスとして返しています。

このように、Fetch APIを使用することで、JavaScriptからPHPに文字を渡すことができます。フォームデータを含めた任意のデータをリクエストボディに含め、PHP側でそれを取得して処理することができます。