web-dev-qa-db-ja.com

AJAX経由でフォームを送信する

次のjQueryコードを使用して、AJAX経由でフォームを送信しています。

jQuery('form.AjaxForm').submit( function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        alert('Submitted')
                      },
            error   : function( xhr, err ) {
                        alert(''Error);     
                      }
        });    
        return false;
    });

コードはajaxなしで完全に動作しています。 ただし、ajaxを介してフォームをロードすると機能しません。JavaScriptのロード後にajaxを介してフォームをロードするためと考えられます。

解決策はありますか？

javascriptjqueryajaxforms
20
Student

JQuery 1.7+を使用している場合は、.on（）を使用してイベントを委任し、同じクラスを持つすべての将来のフォームにバインドすることができます。 $（document）の代わりに動的に挿入されていない最も近い親を見つけてみてください。

$(document).on('submit', 'form.AjaxForm', function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                         alert('Submitted');
            },
            error   : function( xhr, err ) {
                         alert('Error');     
            }
        });    
        return false;
    });
39
adeneo

存在しないhtmlにハンドラーを直接アタッチすることはできません

それを処理するには2つの方法があります。

Ajaxの成功コールバック内にハンドラーをバインドします。

    $(formParentSelector).load(formFileUrl, function() {
        /* within this success callback the new html exists and can run code*/
        AjaxForm();
    });

function    AjaxForm(){
    jQuery('form.AjaxForm').submit( function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        alert('Submitted');
                      },
            error   : function( xhr, err ) {
                        alert('Error');     
                      }
        });    

                                             })
 }

もう1つの方法は、ハンドラーをドキュメントの上位レベルに委任して、将来の一致する要素に対応できるようにすることです。

 jQuery(document).on('submit','form.AjaxForm').submit( function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        alert('Submitted');
                      },
            error   : function( xhr, err ) {
                        alert('Error');     
                      }
        });    

                                             })
2
charlietfl