記入日:2023-04-16 編集日:2023-04-16
JavaScriptのFetch APIでPHPに文字を渡す方法 その2 前回とは別の角度で解説してみようと思います。
この記事を読むと(約5分)
JavaScriptのFetch APIで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化のディレクションなどを行っています。