jQueryでフォームデータを送信する方法のまとめ

jQueryでフォームデータを送信する方法のまとめ

Posted at March 25,2014 1:55 AM
Tag:[form, jQuery]

jQueryでフォームデータを送信する方法のまとめです。

1.submitイベントで送信する

form要素のsubmitイベントで送信する場合のサンプルは次のとおりです。

<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function(){
    $('form').submit(function(event){
        event.preventDefault();
        var f = $(this);
        $.ajax({
            url: f.prop('action'),
            type: f.prop('type'),
            data: f.serialize(),
            timeout: 10000,
            dataType: 'text'
        })
        .done(function( data ) {
            // 通信が成功したときの処理
        })
        .fail(function( data ) {
            // 通信が失敗したときの処理
        })
        .always(function( data ) {
            // 通信が完了したとき
        });
    });
});
</script>
<form type="post" action="http://user-domain/index.php">
  <input type="text" name="text" value="" />
  <input type="submit" value="送信" />
</form>

以下、解説です。

formのsubmitイベントで起動するようにします。

    $('form').submit(function(event){
        // ...
    });

preventDefault()で送信ボタンによるフォーム送信処理をキャンセルします。この設定を行わないと期待する動作になりません。preventDefault()の詳細は「preventDefault()について」をご覧ください。

        event.preventDefault();

URLはform要素のaction属性から取得します。

            url: f.attr('action'),

typeはform要素のmethod属性から取得します。

            type: f.prop('type'),

フォームデータはserialize()で一括送信できます。serialize()を行うと「text1=xxx&text2=yyy」のような形式で送信されます。

            data: f.serialize(),

タイムアウトを設定します。

            timeout: 10000,

受信データのタイプを指定します。

            dataType: 'text'

通信が成功したときの処理はdoneブロックに記述します。

        .done(function( data ) {
            // 通信が成功したときの処理
        })

通信が完了したときの処理はalwaysブロック、通信が失敗したときの処理はfailブロックに記述します。

$ajax()の詳細については「jQuery.ajax()のまとめ」を参照してください。

2.重複送信を防止する

送信ボタンの連続クリックによる重複送信を防止するには、「jQueryでajax()の重複実行を回避する方法」を参考にしてください。

この方法は3項でも利用できます。

3.clickイベントで送信する

form要素を使わず、clickイベントでinput要素などのデータを送信する場合のサンプルは次のとおりです。

<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function(){
    $('#button').click(function(){
        $.ajax({
            url: 'http://user-domain/index.php',
            type: 'post',
            data: {
                text: $('#text').val()
            },
            timeout: 10000,
            dataType: 'text'
        })
        .done(function( data ) {
            // 通信が成功したときの処理
        })
        .fail(function( data ) {
            // 通信が失敗したときの処理
        })
        .always(function( data ) {
            // 通信が完了したとき
        });
    });
});
</script>
<input type="text" id="text" name="text" value="" />
<input type="button" id="button" value="送信" />

おおきな流れはsubmitを利用する場合と同じですが、$ajax()のパラメータはform要素から取得できないので、それぞれ個別に設定する必要があります。

またinput要素にはid属性を付与しています。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)