Fetch API入門

以前の職場では主に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' => '失敗した場合のメッセージ']);
}

まとめ

かなり端折った書き方ですが、ひととおり基本の形はこんな感じです