web-dev-qa-db-ja.com

jQueryで多くのフィールドを持つフォームを投稿するにはどうすればよいですか？

$ .ajax（）はajaxの処理に使用できますが、大きなフォームの値を投稿するのには適していないと思います。

すべてを手作業で入力せずに、どのようにして大きなフォーム（多くのフィールド）をpostしますか？

jqueryformspost
17
omg

その仮定の背後にあるあなたの理由は何ですか？ POSTは、GETよりも大量のデータを転送するように設計されています。AJAX POSTリクエストは、 "normal" POSTリクエスト、わずかに異なる方法でブラウザによって内部的にバンドルおよび処理されます。いくつかのヘッダーはわずかに異なる場合がありますが、データはすべて同じです。なぜ= AJAX「大きな」フォームの処理に失敗しましたか？

とにかく「大きな」フォームとして何を定義しますか？

編集：質問を明確にしていただきありがとうございます。私はあなたが今何を求めているのか理解しています、そしてあなたがどこから来ているのかわかります。入力が多いフォームの場合、常にAjaxリクエストにバンドルするのは面倒な場合があります。

JQueryを使用しているので、これに対する簡単な解決策があります。 serialize（） メソッドを確認してください。フォームを指定すると、ajaxリクエストに直接渡すことができるすべてのフォーム入力要素と値のクエリ文字列が返されます。それがどのように行われるかを示す例がマニュアルページにあります。

あなたがしなければならないのはこれです：

$.ajax({
    data: $("form").serialize(),
    //etc.
});

どこ "form"はフォームのIDです。

43
zombat

各要素を手動で処理したくない場合は、おそらく serialize を使用することをお勧めします。

$.ajax({
   type: "POST",
   url: "form.php",
   data: $("#form_id").serialize()
   success: function(msg) {
     alert("Form Submitted: " + msg);
   }
 });
10
anveo

jQuery.post( url, data, callback, type) の方が簡単なので、 jQuery.ajax( options ) を使用できます。

serialize を使用すると、フォーム全体を自動的に送信できます。

$.post("/post_handler/",
    $("form#my_form").serialize(),
    function(json){
        /*your success code*/
    }, "json");

より完全な例：

<script>
$().ready(function(){
    $("form#my_form submit").click(function(){
        $.post("/post_handler/",
            $("form#my_form").serialize(),
            function(json){
                /*your success code*/
            }, "json");
        return false;
    });
}
</script>
<form id="my_form" action="/post_handler/" method="post">
  <input type="text" name="text1" value="my text 1" />
  <input type="text" name="text2" value="my text 2" />
  <input type="submit" name="submit_button" value="Send" />
</form>

これはデフォルトのpostをオーバーライドし、AJAXで実行します。

6
Esteban Küber

まだ試したことがない場合。次に、[〜＃〜] big [〜＃〜]フォーム（これで意味するものは何でも）を作成し、$.ajax()を使用しますまたはjQueryフォームプラグインを投稿してください。あなたはそれがこの種のもののためであるかどうかを知るでしょう！

編集: 編集後）次に---（フォームプラグイン はあなたのためです！試してみます。

1
TheVillageIdiot

jqueryフォームプラグイン を試してください。

それはおそらくあなたが箱から出してする必要があることを正確に行います。

1
mkoryak

$ .ajax（）を使用してかなり複雑な（大きな）フォームを送信しましたが、問題はありませんでした。私はajaxリクエストを介してファイルを送信していませんが、アップロードが行われていることを確認しました。アップロード中にブラウザーを拘束しないため、従来の投稿よりもうまく機能します。

@zombatへのコメントに基づくと、非常に多くの入力があり、そのほとんどがほとんどの場合空白になると思います。ここでの2つの提案1）入力を別々のフォームに分割し、タッチ/完了したらすぐにそれぞれを送信します。 2）JavaScriptを使用してフォームの状態を調べ、情報をJSONまたはXMLにラップし、フォームデータを投稿する代わりに、データ構造のみを投稿します。

「大」は問題ではないはずです。おそらく、送信が難しい理由をすべての人に知らせる、データを説明するためのより良い形容詞を見つけることができます。

1
John F. Miller

あなたが求めていることは難しいことではありません。フォームのコンテンツを収集してサーバーに渡すだけです（通常はJSONを使用します）。

このハウツーを見てください：

http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59

0
Santi