Posted at

HTML の a タグで POST する

小ネタ。

このツイートを見て、「その通りなんだけど、(ログアウトのリンクを作るときなどに) a 要素だけで POST が送れないから面倒くさいんだよなぁ」と思うなどした。

素朴な解決策としては「a を form で囲んで onclick で submit する」だけど、これだと DOM 構造が変化してしまうので CSS などもまとめて修正する必要が生じたりして面倒くさい。

で、思いついた方法がこれ。

function sendPost(event) {

event.preventDefault();
var form = document.createElement('form');
form.action = event.target.href;
form.method = 'post';
document.body.appendChild(form);
form.submit();
}

<a href="/logout" onclick="sendPost(event)">Logout</a>

JavaScript の関数をどこかで定義しておけば、あとは POST で送りたい a 要素に onclick 属性を追加するだけで POST で送信できるようになる。

これなら DOM 構造も変化しないので手軽。

CSRF トークンを送りたいとか FormData を送りたいとかというニーズもあると思うが、ちょっと改造するだけでできるはずなので各位よしなにやっていってほしい。