Help us understand the problem. What is going on with this article?

HTML の a タグで POST する

More than 1 year has passed since last update.

小ネタ。

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

hoto17296
ソフトウェアエンジニアです
churadata
沖縄で データ分析 / 機械学習 / Deep Learning をやっている会社です
https://churadata.okinawa/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away