【JavaScript】POST送信

2025年3月26日

JavaScriptを経由してPOST送信する

はじめに

LaravelやCakePHPなど、PHPでシステム開発をで、ボタンクリックした時に、JavaScriptを経由しPOST送信しているツールがあります。

古いシステムの改修の場合、まだjQueryのajax()メソッドを使っていたり、新しいものに修正するケースも出てくると思います。

自分も、そんなケースで、ツールによっては古いままの改修が必要だったり、新しいバージョンの環境で動作するようマイグレーションを行う必要があったり、

「新しいものは知ってるけど古い方法知らなかった！」

「古い方法のソースは、新しい方法だとどう書く？」

など、悩んだことがあるので、ここにメモを残しておきます。

　

非同期処理が必要な理由

処理の最後にリロードがある場合など、処理が完了する前にリロードされてしまう。

この処理の流れの場合、同期処理では返却を待たずに画面が表示されてしまいます。

そのため、処理が完了してから画面を表示するために、非同期処理が必要になります。

　

ソース例

jQueryのajax()で、非同期POST送信

// ajax POST
function xxxxxPost(event) {
    if (window.confirm('xxxxxxしますか？')) {
        event.preventDefault();
        // 前処理
        $.ajax({
            type: 'POST',
            url: '/main/xxxxxx',
            data: {
              xxxxx: xxxxx,
            },
            success: function(response) {
                console.log(response);
                if (response.success) {
                  //成功
                  window.location.reload();
                } else {
                  //失敗
                  alert('エラー：' + response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
                alert('通信エラーが発生しました。');
            }
        });
    }
}

上記のソースをそのままコピペして引用してください。

※：CakePHPなどMVCの場合、ControllerのメソッドにPOST送信を行う。
　　mainControllerのsave()メソッドの場合「url: '/main/save’」となる。

jQueryを使用する場合、

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

をheadタグ内に記載する。

　

Vanilla JSで、非同期POST送信

// fetch～then POST
// functionにasync/awaitを使い非同期処理になる
async function xxxxxPost(event) {
    if (window.confirm('xxxxxxしますか？')) {
        event.preventDefault();
        // 前処理
        // 変数パラメータ
        const postData = {
            xxxxx: xxxxx,
            zzzzz: zzzzz,
        };
        // url設定
        var url = '/xxxxxxx';
        // 処理
        await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(postData)
        })
        .then(response => response.json())
        .then(data => {
            // console.log(data);
            if (data.success) {
                //成功
                window.location.reload();
            } else {
                //失敗
                alert('エラー：' + data.message);
            }
        })
        .catch(error => {
            // console.error("Error:", error);
            alert('エラー：' + error.message)
        });
    }
}

上記のソースをそのままコピペして引用してください。

※1：urlはajaxと同様。
※2：「.then(response => response.json()).then(data =>」受け取ったresponse変数は次の.thenでdata変数に変える。この処理は単純な例なので分かりやすいけど、間に処理を複数入れる必要がある場合などは紛らわしいので、.thenごとに変数名を変えた方が処理ブロックが明確になる。

       

POSTデータの受け取り

JavaScriptでPOST送信したデータを、CakePHPで受け取る場合の例。

CakePHP2で受け取る例

$postData = $this->request->data;

CakePHP4で受け取る例

$postData = $this->request->getData();