【Javascript】Fetchを使ってサーバ(PHP)とデータのやり取りをする
- 2022.02.06
- JavaScript
- Ajax, Fetch
目次
はじめに
以前、jQueryを使ったAjaxの使い方について記事にしましたが、ライブラリに依存しないFetchという最近よく使われている方法をまとめてみました。
GET
サーバからデータを受け取りたい時。
JavaScript側
fetch('request.php') // サーバ側のphpファイル .then(response => response.json()) // 返ってきたレスポンスをjsonで受け取って次のthenへ渡す .then(res => { console.log(res) // やりたい処理 }) .catch(error => { console.log(error) // エラー表示 });
サーバ(PHP)側
request.php
<?php // 渡したいデータ $res = 'Hello World!'; // 配列や連想配列でも可 // echoすると渡せる echo json_encode($res); // json形式にして渡す
POST
JavaScript側からサーバ(PHP)側にデータを送りたい場合。
サーバ(PHP)側で処理した結果を受け取る事もできます。
JavaScript側
const data = 'Hello World!'; // 渡したいデータ(配列やオブジェクトでも可) fetch('request.php', { // 第1引数に送り先 method: 'POST', // メソッド指定 headers: { 'Content-Type': 'application/json' }, // jsonを指定 body: JSON.stringify(data) // json形式に変換して添付 }) .then(response => response.json()) // 返ってきたレスポンスをjsonで受け取って次のthenへ渡す .then(res => { console.log(res); // やりたい処理 }) .catch(error => { console.log(error); // エラー表示 });
サーバ(PHP)側
request.php
<?php $raw = file_get_contents('php://input'); // POSTされた生のデータを受け取る $data = json_decode($raw); // json形式をphp変数に変換 $res = $data; // やりたい処理 // echoすると返せる echo json_encode($res); // json形式にして返す
フォームデータを送る場合
フォームデータを送る場合は、json形式にせずそのまま添付し、Content-Type
を指定しません。
JavaScript側
const formData = new FormData(); // フォームオブジェクト作成 formData.append('name', '山田太郎'); // フォームデータにnameを追加 formData.append('email', 'taro@yamada.com'); // フォームデータにemailを追加 fetch('request.php', { // 第1引数に送り先 method: 'POST', // メソッド指定 // Content-Typeは指定しない body: formData // bodyにそのまま添付 }) .then(response => response.json()) // 返ってきたレスポンスをjsonで受け取って次のthenへ渡す .then(res => { console.log(res); // やりたい処理 }) .catch(error => { console.log(error); // エラー表示 });
例えば、こんなフォームがある場合
<form name="myForm"> <input type="text" name="name"> <input type="text" name="email"> <input type="submit" value="送信"> </form>
こんな感じで送信できる
const myFormElm = document.forms.myForm; // フォーム要素を取得 myFormElm.addEventListener('submit', (e) => { // 送信ボタンが押されたら実行 e.preventDefault(); const formData = new FormData(myFormElm); // フォームオブジェクト作成 fetch('request.php', { // 第1引数に送り先 method: 'POST', // メソッド指定 // Content-Typeは指定しない body: formData // bodyにそのまま添付 }) .then(response => response.json()) // 返ってきたレスポンスをjsonで受け取って次のthenへ渡す .then(res => { console.log(res); // やりたい処理 }) .catch(error => { console.log(error); // エラー表示 }); });
サーバ(PHP)側
request.php
// $_POSTで受け取れる // 例えば、年齢を追加して返す $res['name'] = $_POST['name']; $res['email'] = $_POST['email']; $res['age'] = '25'; // 年齢を追加 // echoすると返せる echo json_encode($res); // json形式にして返す
まとめ
AjaxとFetch、書き方などは似ていますが、ライブラリーに依存しない分、Fetchの方が高速らしいです。IEには非対応ですが(IEのサポートももうすぐ終了ですし)今後はこちらが主流になりそうですね。
どちらにしても、これらは非同期で動作することを意識して使わないと、思わぬ落とし穴にハマる事もあるので注意が必要です。
-
前の記事
【JavaScript】JSON.parse()でエラー(リテラルの不正な制御文字) 2021.07.07
-
次の記事
PhotoSwipe v5 の使い方(最低限のコードで簡単実装) 2023.01.29
コメントを書く