GETではなくPOSTを使用するリンクを作成する


204

これが可能かどうかはわかりません。しかし、ハイパーリンクにいくつかの変数を渡し、GETではなくPOST(フォームのような)を使用する方法を誰かが知っているかどうか疑問に思っていました。


HTMLではできません。JavaScriptはリンクのクリックイベントをキャッチし、HTMLを変更できない場合は必要な処理を実行でき、見た目の問題だけであれば、CSSはリンクのようなボタンのスタイルを設定できます。
シルヴァン、2015

回答:


98

投稿する値を保持する非表示の入力を含むフォームを作成し、フォームのアクションを宛先URLに設定し、フォームメソッドをpostに設定します。次に、リンクをクリックすると、フォームを送信するJS関数がトリガーされます。

例についてここを参照してください。この例では、jQueryを使用せずに純粋なJavaScriptを使用します。すでに持っているもの以外をインストールしたくない場合は、これを選択できます。

<form name="myform" action="handle-data.php" method="post">
  <label for="query">Search:</label>
  <input type="text" name="query" id="query"/>
  <button>Search</button>
</form>

<script>
var button = document.querySelector('form[name="myform"] > button');
button.addEventListener(function() {
  document.querySelector("form[name="myform"]").submit();
});
</script>

16
なぜこれが受け入れられた答えなのですか?質問では、GETではなくPOST(フォームのような)使用することを具体的に求めていますが、この回答は「アクションを取得先のURLとメソッドに設定する」と述べています。
Majid Fouladpour 2014年

3
わかった。私が理解していないのはこれです:POSTできるように非表示のフォームを作成する問題に直面しますが、フォームが作成された後、メソッドをに設定することを提案する理由GET何ですか?私たちは持っていたget我々は、フォームがないわけではないのですか?
Majid Fouladpour 2014年

3
あなたが正しいです。それはエラーでしたが、どういうわけかOPはまだそれを正しく行いました(おそらく、含まれているリンクがより明確であるためです)。ご指摘ありがとうございます。私はそれを完全に言い換えました。
Palantir 2014

3
よりモダンなアプローチを使用するように回答を更新しました。同意しない場合は、この編集を自由にロールバックしてください。
のMichałPerłakowski

3
このプロセスにJavascriptを使用する理由はありません。なぜこれが受け入れられた答えなのですか?
シャッカー、

322

これにはJavaScriptは必要ありません。この答えが投稿された時点では、この質問に対するすべての答えは何らかの方法でJavaScriptを使用することを含んでいます。

送信するデータを含む非表示フィールドを含むフォームを作成し、フォームの送信ボタンをリンクのようにスタイル設定することにより、純粋なHTMLおよびCSSでこれをかなり簡単に行うことができます。

例えば:

.inline {
  display: inline;
}

.link-button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1em;
  font-family: serif;
}
.link-button:focus {
  outline: none;
}
.link-button:active {
  color:red;
}
<a href="some_page">This is a regular link</a>

<form method="post" action="some_page" class="inline">
  <input type="hidden" name="extra_submit_param" value="extra_submit_value">
  <button type="submit" name="submit_param" value="submit_value" class="link-button">
    This is a link that sends a POST request
  </button>
</form>

使用する正確なCSSは、サイトの通常のリンクのスタイルによって異なります。


4
同意した。メールでこれを行う方法が必要だったので、JSはあまり選択肢になりませんでした。これは完全に機能するはずです
SynackSA

8
私はこれを1度だけ賛成できます。これは、すべてのHTML質問の99.728%がJavascriptまたはjQueryの問題と混同されることになるのと同じくらい悲しいことです。
2016

3
これは確かにリンクのように見えるボタンを使用する簡単な方法ですが、実際にはハードコーディングされています。このボタンが適用される条件を正確に把握し、すべての場合に明示的に設定する必要があります。JS / JQueryに基づく回答は、リンク要素自体(またはいずれかの要素)を使用しているため、より一般的であると思います。
MakisH 2016年

2
@ Ajedi32申し訳ありませんが、私のコメントはそれほど明確ではありませんでした。主に、このボタンは<a>要素のように見えるようにスタイルが設定されていると言っています。ただし、ページの異なる部分など、スタイルが異なる他の<a>要素の周りにボタンを配置する場合、ボタンにも<a>のすべてのcssルールを複製して、ホバー、訪問済みなどのルールを作成する必要があります。さもなければそれはもちろん仕事をしますが、醜く見えます。他のソリューションでは、CSSを変更する必要はなく、既存のすべての要素と同様に<a>要素を取得するだけです。もちろん、純粋なHTMLにはいくつかの利点もあります。
MakisH 2016年

1
@Robert AFAIK、他の提案されたソリューションはいずれも中クリックでも機能しません。あなたが本当に徹底的になりたいなら、あなたはリンクでPOSTリクエストを提出することは不可能であると言うかもしれません。POSTリクエストはフォームとJavaScriptでのみ送信できます。
Ajedi32 2018

48

JavaScript関数を使用できます。JQueryには、使用することに決めた場合に備えて、素晴らしいpost関数が組み込まれています。

jQuery投稿

<script language="javascript"> 

   function DoPost(){
      $.post("WhateverPage.php", { name: "John", time: "2pm" } );  //Your values here..
   }

</script>


<a href="javascript:DoPost()">Click Here</A> 

5
これは要求どおりにPOSTリクエストを作成しますが、「Whatever.php」の場所に移動する必要があるため、これを使用できませんでした。
Chris

6
$.post('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
JREAM 2013年

1
@mplungjan hrefは、リンクの参照先を示していますが、動作とコンテンツを混同するのは間違いであることに同意しますが、この場合はJavaScript 参照です。つまり、「リンクをクリックすると、JavaScriptを使用してポストバックが実行されます」。これは、クリックイベントをバインドするよりも意味があります。「hrefでjavascriptを使用しない」などのハードルールは、他の悪習と同じくらい悪いものです。
Menol

@メノール私が言った:推奨されません。-「使用しない」ではありません。あなたは本当にあなたにしたい場合は行うことができます<a href="whyjavascript.html" id="postIt">Click Here</a>し、持っている$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
mplungjan

1
@mplungjanは、コンテンツ/動作の混乱を避けるために、他の推奨事項と同様に紹介されています。推奨範囲外の場合に推奨事項が提示されると、それはハードルールとして表示され始めます。あなたが与えた例は、「ルール」の安全側にあるためにさらに1マイル進んでいるように見えるので、将来プログラマを非難することはできませんが、この安全性は読みやすさと意味を犠牲にして実現されます。それは別の実用的な開発者にはそれがどのように見えるかだけですが、あなたがそれを意味しなかったと確信しています。
Menol

24

これは古い質問ですが、どの回答も要求を完全に満たしていません。だから私は別の答えを追加しています。

リクエストされたコードは、私が理解しているように、通常のハイパーリンクの動作方法に1つだけ変更を加えるPOST必要がありGETます。メソッドをの代わりに使用する必要があります。直接的な影響は次のとおりです。

  1. リンクがクリックされたら、タブをのURLにリロードする必要があります href
  2. メソッドはPOSTなので、読み込むターゲットページのURLにクエリ文字列を含めないでください。
  3. そのページは、パラメーター(名前と値)でデータを受け取る必要があります。 POST

ここではjqueryを使用していますが、これはネイティブAPIで実行できます(もちろん、より難しく、より長くなります)。

<html>
<head>
    <script src="path/to/jquery.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {

            $("a.post").click(function(e) {
                e.stopPropagation();
                e.preventDefault();
                var href = this.href;
                var parts = href.split('?');
                var url = parts[0];
                var params = parts[1].split('&');
                var pp, inputs = '';
                for(var i = 0, n = params.length; i < n; i++) {
                    pp = params[i].split('=');
                    inputs += '<input type="hidden" name="' + pp[0] + '" value="' + pp[1] + '" />';
                }
                $("body").append('<form action="'+url+'" method="post" id="poster">'+inputs+'</form>');
                $("#poster").submit();
            });
        });
    </script>
</head>
<body>
    <a class="post" href="reflector.php?color=blue&weight=340&model=x-12&price=14.800">Post it!</a><br/>
    <a href="reflector.php?color=blue&weight=340&model=x-12&price=14.800">Normal link</a>
</body>
</html>

そして、結果を確認するには、上記を保存したディレクトリと同じディレクトリにreflector.phpとして以下を保存します。

<h2>Get</h2>
<pre>
<?php print_r($_GET); ?>
</pre>

<h2>Post</h2>
<pre>
<?php print_r($_POST); ?>
</pre>

12

投稿された同様のアプローチを使用した別の実用的な例:HTMLフォームを作成し、JavaScriptを使用して投稿をシミュレートします。これは2つのことを行います。データを新しいページに投稿し、それを新しいウィンドウ/タブで開きます。

HTML

<form name='myForm' target="_blank" action='newpage.html' method='post'>
<input type="hidden" name="thisIsTheParameterName" value="testDataToBePosted"/>
</form>

JavaScript

document.forms["myForm"].submit();

3

HTML + JQuery:POSTで非表示のフォームを送信するリンク。

私はこれらすべての答えを理解するために多くの時間を費やし、そしてそれらすべてにいくつかの興味深い詳細があるので、これは最終的に私のために機能し、その単純さのために私が好む結合バージョンです。

私のアプローチは、非表示のフォームを作成し、ページの他の場所にあるリンクをクリックして送信することです。ページの本文のどこにフォームが配置されるかは関係ありません。

フォームのコード:

<form id="myHiddenFormId" action="myAction.php" method="post" style="display: none">
  <input type="hidden" name="myParameterName" value="myParameterValue">
</form>

説明:

display: noneフォームを非表示にします。または、divまたは別の要素に配置して、要素にを設定することもできdisplay: noneます。

type="hidden"(図示されないが、そのデータは、アクションeitherwaysに送信されるFILD作成するW3Cを参照します)。これが最も単純な入力タイプであることを理解しています。

リンクのコード:

<a href="" onclick="$('#myHiddenFormId').submit(); return false;" title="My link title">My link text</a>

説明:

空はhrefちょうど同じページを対象としています。ただし、この場合return false、ブラウザがリンクをたどることができなくなるため、これは実際には問題になりません。もちろん、この動作を変更することもできます。私の特定のケースでは、アクションの最後にリダイレクトが含まれていました。

onclick使用を避けるために使用されたhref="javascript:..."としてmplungjanによって指摘します$('#myHiddenFormId').submit();(コードは非常に小さいため、代わりに関数を定義する)フォームを送信するために使用しました。

このリンクは、他の<a>要素とまったく同じように見えます。実際には、<a><span>またはまたは画像など)の代わりに他の要素を使用できます。


2

このjQuery関数を使用できます

function makePostRequest(url, data) {
    var jForm = $('<form></form>');
    jForm.attr('action', url);
    jForm.attr('method', 'post');
    for (name in data) {
        var jInput = $("<input>");
        jInput.attr('name', name);
        jInput.attr('value', data[name]);
        jForm.append(jInput);
    }
    jForm.submit();
}

ここにjsFiddleの例があります(http://jsfiddle.net/S7zUm/


@DaoLamコードは実際に機能します。phprefの値をleserged.free.fr/phpinfo.php に置き換え、値を渡してフォームをそのサイトに投稿しました。
JSWilson 2018年

2

多くの投稿で言及されているように、これは直接は不可能ですが、簡単で効果的な方法は次のとおりです。最初に、送信用のボタンと入力がないHTMLページの本文にフォームを配置します隠されています。次に、JavaScript関数を使用してデータを取得し、フォームを送信します。この方法の利点の1つは、サーバー側のコードに依存する他のページにリダイレクトすることです。コードは次のとおりです。これで、「POST」メソッドに入る必要がある場所になりました。

<script type="text/javascript" language="javascript">
function post_link(data){

    $('#post_form').find('#form_input').val(data);
    $('#post_form').submit();
};
</script>

   <form id="post_form" action="anywhere/you/want/" method="POST">
 {% csrf_token %}
    <input id="form_input" type="hidden" value="" name="form_input">
</form>

<a href="javascript:{}" onclick="javascript:post_link('data');">post link is ready</a>

1

私はよりダイナミックなアプローチを提案します、ページへのhtmlコーディングなしで、それを厳密にJSに保ちます:

$("a.AS-POST").on('click', e => {
  e.preventDefault()
  let frm = document.createElement('FORM')
  frm.id='frm_'+Math.random()
  frm.method='POST'
  frm.action=e.target.href
  document.body.appendChild(frm)
  frm.submit()
})

0

JavaScriptを使用する代わりに、非表示のフォームを送信するラベルを使用することもできます。非常にシンプルで小さなソリューション。ラベルはHTMLのどこにでも配置できます。

<form style="display: none" action="postUrl" method="post">
  <button type="submit" id="button_to_link"> </button>
</form>
<label style="text-decoration: underline" for="button_to_link">  link that posts </label>


-1

これを確認してください

$().redirect('test.php', {'a': 'value1', 'b': 'value2'});

2
このソリューションには次のライブラリが必要であることを言及する必要があります。github.com
Felix G.
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.