18

page 1投稿リクエストを受け入れ、いくつかのことを行い、最後にいくつかのデータを表示するページ ( ) があります。

別のページ ( ) から、ボタンがクリックされたときpage 2にリダイレクトしたいのですが、もちろん、必要なすべての関連データを POST 経由で送信します。page 1page 1

もちろん、ユーザーがボタンをクリックした直後に、ページに非表示のフォームを配置し、jquery を使用して必要なすべてのデータを詰め込み、自動的に submit() するという古いハックを使用できます。$.postしかし、それは面倒に見えます。html の操作を開始するよりも、 に似た構文を使用する方がはるかに優れています。$.post実際にページにリダイレクトし、リクエストを非同期に行わなければ完璧です（何かを表示するにはデータが必要page 1なので、ajaxy投稿が完了した後にリダイレクトすることはできませんpage 1）。

私がjqueryでやりたいことをする方法はありますか、それとも醜い目に見えないフォームが唯一の方法ですか?

PS

私が望むものを達成するための複雑な方法が他にもあることは知っています。たとえば、現在表示しているページに応答の html を使用して植えるだけですが、jquery でこれを行う簡単な$.post方法があるかどうかを知りたいだけです。

4

5 に答える 5

15

これにより、あなたが説明した $.post 動作を模倣する小さな jQuery 関数のアイデアが得られました。バックグラウンドではまだ非表示のフォームを使用していますが、その構文は比較的クリーンで単純です。

$(document).ready(function(){
    $('#myButton').PostIt('post.php', {foo:'bar', abc:'def', life:42});
    $('#myOtherButton').PostIt('post.php', dataObjectFromSomewhereElse);
});

$.fn.PostIt = function(url, data){

  $(this).click(function(event){

        event.preventDefault();

        $('body').append($('<form/>', {
          id: 'jQueryPostItForm',
          method: 'POST',
          action: url
        }));

        for(var i in data){
          $('#jQueryPostItForm').append($('<input/>', {
            type: 'hidden',
            name: i,
            value: data[i]
          }));
        }

        $('#jQueryPostItForm').submit();
    });
}
于 2010-10-02T15:39:16.957 に答える
9

Greg W のコードを、コード内で呼び出すことができるストレート関数に適合させました。

function postIt(url, data){

    $('body').append($('<form/>', {
      id: 'jQueryPostItForm',
      method: 'POST',
      action: url
    }));

    for(var i in data){
      $('#jQueryPostItForm').append($('<input/>', {
        type: 'hidden',
        name: i,
        value: data[i]
      }));
    }

    $('#jQueryPostItForm').submit();
}
于 2011-07-09T03:42:16.127 に答える
0

POSTリクエストを発行する必要がある場合は、非表示のフォームがより適切なオプションの1つです。

アプリケーションがGETリクエストを処理する場合は、データをクエリ文字列にエンコードして、を実行します。

document.location.href =

を使用jQuery.serializeしてクエリ文字列を生成できます。

于 2010-10-02T15:13:34.777 に答える
0

答えは簡単な方法はないということだと思います。この機能を追加する一般的な関数については、GregWの回答を参照してください。

于 2010-11-16T08:56:27.343 に答える
-2

html:

<form id="myform" method="get" acction="page2">
   <!-- data -->
</form>

js:

$('#myform').bind('submit', function(ev) {

  ev.stopPropagation();

  var ok = true;
  //manipulate html and 'ok'

  return ok;   // if ok == false, don't execute post


});
于 2010-10-02T15:23:50.723 に答える