TopJavaScriptjQuery > 2014年3月
2014年3月25日

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

March 25,2014 1:55 AM
Tag:[, ]
Permalink

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属性を付与しています。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3