web-dev-qa-db-ja.com

リンクをGETの代わりにPOSTを使用するようにする

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

javascripthtmlhttp
172
Elliot

投稿する値を保持する隠し入力を持つフォームを作成し、フォームのアクションをリンク先のURLに設定し、フォームメソッドを投稿。次に、あなたのリンクがクリックされたとき、フォームを送信するJS関数を起動します。

例として、 here を参照してください。この例では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>
84
Palantir

これにはJavaScriptは必要ありません。この答えが投稿された時点では、allのうち、明確にしたいと思いました。この質問に対する答えは、何らかの方法で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はあなたのサイトの通常のリンクがどのようにスタイルを設定されているかによって変わるかもしれません。

267
Ajedi32

あなたはJavaScript関数を使用することができます。 JQueryには、使用することを決定した場合に組み込まれたNice post関数があります。

JQuery Post

<script language="javascript"> 

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

</script>



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

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

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

  1. リンクをクリックしたら、タブをhrefのURLにリロードします。
  2. メソッドがPOSTなので、ロードするターゲットページのURLにクエリ文字列がないはずです。
  3. そのページはPOSTによってパラメータ（名前と値）でデータを受け取るべきです

私はここでjqueryを使用していますが、これはネイティブのapisを使って行うことができます（もちろんより長くそしてより長く）。

<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>
24
Majid Fouladpour

投稿された同様のアプローチを使用した別の実用的な例：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();
10
Quannt

生のHTMLを使用してこれを行うことはできませんが、jQueryを使用してリンクに click イベントハンドラを追加して post 関数を使用してPOSTを発行することができます。

4
Justin Ethier

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"は表示されないファイルを作成しますが、そのデータはいずれにしてもアクションに送信されます（ 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>またはimage）。

3
MakisH

この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/ ）

2
DarkThanos

多くの投稿で言及されているように、これは直接可能ではありませんが、簡単で成功する方法は次のとおりです。隠されています。次に、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>
0
Mahdi Firouzjah

これをチェックしてくださいそれはあなたを助けます

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