href (アンカータグ) を GET ではなく POST でリクエストしますか? [重複] 質問する

href (アンカータグ) を GET ではなく POST でリクエストしますか? [重複] 質問する
<a href="employee.action" id="employeeLink">Employee1</a>

Employee1 リンクをクリックすると、GET リクエストがサーバーに送信されます。GET リクエストではなく POST リクエストにしたいのですが、href のデフォルトの GET 動作を変更する方法はありますか?

注: ハイパーリンクのクリック時に JavaScript 関数を呼び出してフォームを作成し、送信できる方法はわかっています。ただし、アンカー タグで何らかの属性を指定して、GET リクエストではなく POST リクエストを作成できる場所を探しています。

ベストアンサー1

jQueryを使用すると非常に簡単です。投稿したいURLが同じサーバー上にあるか、CORSが実装されていると仮定します。

$(function() {
  $("#employeeLink").on("click",function(e) {
    e.preventDefault(); // cancel the link itself
    $.post(this.href,function(data) {
      $("#someContainer").html(data);
    });
  });
});

フレームの使用を強くお勧めしませんが、どうしても使用したい場合は、フォームを用意してリンクとともに送信してください。

<form action="employee.action" method="post" target="myFrame" id="myForm"></form>

そして(プレーンなJSで)使用する

 window.addEventListener("load",function() {
   document.getElementById("employeeLink").addEventListener("click",function(e) {
     e.preventDefault(); // cancel the link
     document.getElementById("myForm").submit(); // but make sure nothing has name or ID="submit"
   });
 });

フォームがなければ作成する必要がある

 window.addEventListener("load",function() {
   document.getElementById("employeeLink").addEventListener("click",function(e) {
     e.preventDefault(); // cancel the actual link
     var myForm = document.createElement("form");
     myForm.action=this.href;// the href of the link
     myForm.target="myFrame";
     myForm.method="POST";
     myForm.submit();
   });
 });

おすすめ記事