HTML の a タグで POST する #JavaScript

小ネタ。

具体例を挙げると、削除処理やログアウト処理は副作用があるのでPOSTにすべきですが、GETになっているケースをよく見かけます。PHPの教科書とか、特にね https://t.co/6B7wOXJhNp
— 徳丸浩 (@ockeghem) July 16, 2019

このツイートを見て、「その通りなんだけど、(ログアウトのリンクを作るときなどに) 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 を送りたいとかというニーズもあると思うが、ちょっと改造するだけでできるはずなので各位よしなにやっていってほしい。