web-dev-qa-db-ja.com

リンクを介して投稿リクエストで別のページに移動する

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>    
<script type="text/javascript">
    function DoPost(){
      $.post("index.html", { name: "John", time: "2pm" } );
   }
    </script>
</head>

<body>
<a href="javascript:DoPost()">GO</a>

</body>
</html>

私は関数を作成し、その関数を呼び出そうとしました。その関数の中で、URLとデータについて言及しました ここ 。しかし、それは私のために働いていません。

注：投稿のタイトルで触れたが、それも明確にしたい。POSTを使用して別のページに移動したい単純なハイパーリンクによるメソッド。

javascriptjqueryhtmlposthyperlink
17
Ravi

送信する必要のあるすべてのデータを含むHTMLフォームを作成し、ユーザーに転送する必要があるページをアクションとして指定します。

<form method="post" id="theForm" action="REDIRECT_PAGE.php">

次に、そのフォームにいくつかの非表示フィールドを配置します。

<input type="hidden" name="name" value="John">
<input type="hidden" name="time" value="2pm">
</form>

これをdoRedirect関数の内側にラップすると、POSTデータを正しく送信しながらリダイレクトが機能します。

document.getElementById('theForm').submit()

補足として、POSTデータを読み取る必要がある場合は、ユーザーを.htmlページではなく.phpページにリダイレクトすることをお勧めします。これはサーバーの設定によって異なりますが、デフォルトでは、 .htmlファイル内でPHPコードを実行できないと思います。

16
Saturnix

この質問はほぼ4年前のものであり、すでに認められた回答がありますが、別の解決策を提供するとともに、間違いを指摘したいと思います。

パート1：ソリューション

POSTリクエストで移動するための従来のソリューションは、受け入れられた回答が使用するフォームです。この上に、DOMを使用してプログラムでフォームを作成するソリューションを提示することで構築します。

var payload = {
  name: 'John',
  time: '2pm'
};
var form = document.createElement('form');
form.style.visibility = 'hidden'; // no user interaction is necessary
form.method = 'POST'; // forms by default use GET query strings
form.action = 'index.html';
for (key in Object.keys(payload)) {
  var input = document.createElement('input');
  input.name = key;
  input.value = payload[key];
  form.appendChild(input); // add key/value pair to form
}
document.body.appendChild(form); // forms cannot be submitted outside of body
form.submit(); // send the payload and navigate

私は元のコードに従ってindex.htmlを使用しましたが、受け入れられた回答のアドバイスを取り入れて、PHPを使用してPOSTデータを受け入れ、処理します。

パート2：問題

元のソリューションの主な問題は、$.postの上に構築されたヘルパー関数である$.ajaxを使用したことです。 AJAXは、別のページに移動するのではなく、サーバーからデータを取得して現在のページ内で使用するときに使用することを目的としています。

10
robbie

これは正常に動作するはずです。 1つの答えに似ていますが、より良い答えです。

var payload = {
  name: 'John',
  time: '2pm'
};
var form = document.createElement('form');
form.style.visibility = 'hidden';
form.method = 'POST';
form.action = link;
$.each(Object.keys(payload), function(index, key) {
var input = document.createElement('input');
    input.name = key;
    input.value = payload[key];
    form.appendChild(input)
});
document.body.appendChild(form);
form.submit();
5
IamMHussain

最後に、私はそれを行いましたが、私が望んでいたとおりではありませんでした。しかし、それは私にとって役に立ちます。今、他の人と共有する

<html>
  <head>
    <script type="text/javascript">
      function DoPost() {
        document.postlink.submit();
      }   
    </script>
  </head>

  <body>
    <a href="javascript:DoPost()">GO</a>
    <form action="demo.php" name="postlink" method="post">
      <input type="hidden" name="name" value="this is my POST data">
    </form>
  </body>
</html>
0
Ravi
function js_navigate_with_post(js_url, js_post_params)
{
    var js_html='';
    js_html += "<form id='js_navigate_with_post' method='post' action='"+js_url+"'>\n";
    js_html +=  "<input type='hidden' name='js_navigate_with_post' value='true'>\n";
    for (var js_key in js_post_params) {
        if (js_post_params.hasOwnProperty(js_key))
        {
            js_html +=  "<input type='hidden' name='"+js_key+"' value='"+js_post_params[js_key]+"'>\n";
        }
    }
    js_html += "</form>\n";
    jQuery('body').append(js_html);
    jQuery('#js_navigate_with_post').submit();
}
0
ihorsl