web-dev-qa-db-ja.com

フォームを送信して同じページに滞在しますか？

このようなフォームがあります

<form action="receiver.pl" method="post">
  <input name="signed" type="checkbox">
  <input value="Save" type="submit">
</form>

[送信]がクリックされたときに同じページに留まりたいが、receiver.pl実行されました。

どうすればいいですか？

javascripthtmlperl
52
Sandra Schlichting

最も簡単な答え：jQuery。このようなことをしてください：

$(document).ready(function(){
   var $form = $('form');
   $form.submit(function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });
});

コンテンツを動的に追加し、それが機能するために必要であり、複数のフォームを使用したい場合、これを行うことができます：

   $('form').live('submit', function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });
63
Herman Schaaf

このような場合、99％の時間で XMLHttpRequest または fetch を使用します。ただし、javascriptを必要としない代替ソリューションがあります...

非表示のiframeをページに含めて、そのiframeを指すようにフォームのターゲット属性を設定できます。

<style>
  .hide { position:absolute; top:-1px; left:-1px; width:1px; height:1px; }
</style>

<iframe name="hiddenFrame" class="hide"></iframe>

<form action="receiver.pl" method="post" target="hiddenFrame">
  <input name="signed" type="checkbox">
  <input value="Save" type="submit">
</form>

このルートを選択するシナリオはほとんどありません。一般に、javascriptを使用すると、javascriptを使用して次のことができます...

  • エラーを適切に処理する（例：再試行）
  • uIインジケーターを提供する（例：ロード、処理、成功、失敗）
  • リクエストが送信される前にロジックを実行するか、レスポンスが受信された後にロジックを実行します。
61
jessegavin

これを行うHTTP/CGIの方法は、プログラムが204（コンテンツなし）のHTTPステータスコードを返すことです。

35
Dave Cross

送信ボタンを押すと、ページがサーバーに送信されます。非同期で送信する場合は、ajaxを使用して送信できます。

3
Eric Frick

XMLHttpRequest を使用します

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() { // Call a function when the state changes.
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // Request finished. Do processing here.
    }
}
xhr.send("foo=bar&lorem=ipsum");
// xhr.send(new Int8Array()); 
// xhr.send(document);
0
Hasan A Yousef