UI設計したり、ウェブシステムを開発したりします。 

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

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

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

この記事を読むと(約5分)
JavaScriptのFetch APIでPHPに文字を渡す基本的なコードがイメージできます。

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側でそれを取得して処理することができます。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。