小粋空間  -  a cheap joke and a play on words site

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

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

１．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()のまとめ」を参照してください。

２．重複送信を防止する

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

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

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