回答:
投稿する値を保持する非表示の入力を含むフォームを作成し、フォームのアクションを宛先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>
GET
何ですか?私たちは持っていたget
我々は、フォームがないわけではないのですか?
これには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は、サイトの通常のリンクのスタイルによって異なります。
JavaScript関数を使用できます。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>
$.post('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
<a href="whyjavascript.html" id="postIt">Click Here</a>
し、持っている$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
これは古い質問ですが、どの回答も要求を完全に満たしていません。だから私は別の答えを追加しています。
リクエストされたコードは、私が理解しているように、通常のハイパーリンクの動作方法に1つだけ変更を加えるPOST
必要がありGET
ます。メソッドをの代わりに使用する必要があります。直接的な影響は次のとおりです。
href
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>
投稿された同様のアプローチを使用した別の実用的な例: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();
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>
またはまたは画像など)の代わりに他の要素を使用できます。
この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/)
多くの投稿で言及されているように、これは直接は不可能ですが、簡単で効果的な方法は次のとおりです。最初に、送信用のボタンと入力がない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>
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>
これを確認してください
$().redirect('test.php', {'a': 'value1', 'b': 'value2'});