以前の職場では主にjQueryのajaxを使用していましたが、新しい職場ではJavaScriptのFetch APIを使うことになったので、基本的なアレコレをまとめてみた。
JS
まずはJS側の記述。
// フォームデータを作成 const formData = new FormData(); const input = document.getElementById('input').value; formData.append('input', input); // パラメータをまとめる const param = { method: "POST", body: formData } // 実行 fetch("sample.php", param) .then((response) => response.json()) .then((json) => { console.log(json); });
PHP
続いてPHP側の書き方
// POSTパラメータを取得 $input = $_POST['input']; try { // 目的の処理をする(省略) // 最後に成功した場合の返り値を設定してecho出力 echo json_encode(['result' => 'OK', 'msg' => '成功した場合のメッセージ']); } catch (Exception $ex) { // エラーログを出力 error_log($ex->getMessage()); // 失敗した場合の返り値を設定してecho出力 echo json_encode(['result' => 'NG', 'msg' => '失敗した場合のメッセージ']); }
まとめ
かなり端折った書き方ですが、ひととおり基本の形はこんな感じです