jQuery アンカーでPOST送信

2019/02/03

「アンカーリンクで画面遷移の際にPOST送信で送りたい!」とのちょっと特殊な要件の対応をしたため、備忘録がてらに投稿。

要件概要

・アンカータグのプロパティ(data-〜)に設定されたパラメータをhrefで指定された画面へPOST送信したい!

・削除ボタンなどでも使いたい!その際には確認ダイアログを表示できる様にしたい!

用意するもの

・jQuery(1.12.4

JS

postlink.js

function createPostLink(selector) {
    // selectorで指定された要素のクリックイベントにpost送信の機能を付与
    $(selector).click(function () {
        // 後々パラメータをsubmitするためのformを生成
        var $form = $('<form/>').attr({
            'action': '',
            'method': 'post',
        });
        // post先のパスを取得
        var action = $(this).attr('href');
        // data-〜から始まるプロパティのリストを取得
        var params = $(this).data();
        // formのアクションを設定
        $form.attr('action', action);
        var cmsgs = '';
        for (var name in params) {
            if ("confirm_message" == name) {
                // data-confirm_messageプロパティがあった場合は確認ダイアログ用メッセージとして設定
                cmsgs = params[name];
                continue;
            }
            // data-confirm_message以外は送信パラメータに設定し、hiddenでformに追加
            var $input = $('<input type="hidden" />').attr('name', name).val(params[name]);
            $form.append($input);
        }
        if (cmsgs) {
            // 確認ダイアログメッセージが設定されている場合はconfirmでダイアログを表示
            if (window.confirm(cmsgs)) {
                // OKなら生成したformをbodyに追加し、submitを実行
                $('body').append($form);
                $form.submit();
            }
        } else {
            // 確認ダイアログメッセージが設定されていなければリンククリックでsubmitを実行
            $('body').append($form);
            $form.submit();
        }
        return false;
    });
}

HTMLサンプル

<body>
    <a href="/action/delete.php" data-confirm_message="削除しますか?" data-target_id="1" class="delete-btn">削除</a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="postlink.js"></script>
    <script>
        $(function(){
           // class="delete-btn" 要素にpost送信機能を付与
           createPostLink('.delete-btn');
        });
    </script>
</body>