web-dev-qa-db-ja.com

JavaScript：POSTの送信、応答へのリダイレクト

オンクリックの画像があります。クリックイベントが発生したときに、HTTP POSTを送信し、window.locationをPOSTへの応答にリダイレクトさせたいのですが、どうすればよいですか？

javascripthttppostredirect
12
JamesBrownIsDead

ボタンをフォーム要素のsubmitメソッドにバインドするだけで、リダイレクトが自然に発生します。

<script type='text/javascript'>
 function form_send(){
   f=document.getElementById('the_form');
   if(f){
     f.submit();
     }
   }
 </script>

<form method='post' action='your_post_url.html' id='the_form'>
  <input type='hidden' value='whatever'>
</form>

<span id='subm' onclick='form_send()'>Submit</span>
16
Mark Snidovich

POSTリクエストを非同期で送信する必要があると仮定すると、正しい方向に進むために以下の例を確認することをお勧めします。

<img src="my_image.png" onClick="postOnClick();">

次に、非同期HTTP POSTリクエストを送信し、ブラウザをHTTP応答から受信したURLにリダイレクトするJavaScript関数が必要です。このような場合はXMLHttpRequestを使用できるはずです。次の例のように、非同期呼び出し：

function postOnClick()
{
    var http = new XMLHttpRequest();

    var params = "arg1=value1&arg2=value2";

    http.open("POST", "post_data.php", true);

    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");

    http.onreadystatechange = function() {
        if (http.readyState == 4 && http.status == 200) {
            window.location = http.responseText;
        }
    }

    http.send(params);
}

真のクロスブラウザーXMLHttpRequest呼び出しの場合、次のようなJavaScriptフレームワークを使用している場合を除き、 XMLHttpRequest.js のような標準準拠のクロスブラウザーXMLHttpRequest実装を使用することをお勧めします。 jQuery 、 Prototype 、 [〜＃〜] yui [〜＃〜] 、 ExtJS 、etal。

さらに、上記は同じドメイン内でホストされているスクリプトに投稿する場合にのみ機能することにも注意してください。そうしないと、 同一生成元ポリシー に違反し、最新のWebブラウザは送信を拒否します。リクエスト。

13
Daniel Vassallo

_window.location = http.responseText_の代わりに、以下を使用します。

_http.onreadystatechange = function() {
  if (http.readyState == 4 && http.status == 200) {
    document.open();
    document.write(http.responseText);
  }
}
_

document.open()はページの現在のコンテンツをクリアし、document.write()は応答htmlコードをページに挿入します。

3
RonnyR

jQuery を使用して、データを投稿し、次のように目的の場所にリダイレクトします。

$.ajax({
  type: 'POST',
  url: 'receivedata.asp',
  data: 'formValue=someValue',
  success: function(data){
      window.location = data;
  }
});

投稿先のページに渡すデータがない場合は、data: 'formValue=someValue',を削除できます。

2
Naeem Sarfraz

あなたは私が作ったこの関数を使うことができます：

http://jsfiddle.net/cgarciagl/KU4B6/

2
cgarciagl

入力タイプの画像を使用します。

<form action="someUrl.html" method="POST">
    <input type="image" src="img.png" width="30" height="30" alt="Submit">
</form>

画像をクリックすると、「someUrl.html」にリダイレクトされ、投稿が送信されます

1
Mic