Question

注意::我已经用注释替换了一些代码，使其更短，更易读

我正在使用Javascript（Ajax）和PHP（Laravel）。我遇到了困境！在调用ajax函数时，我有两个监听器在ajax处理时显示加载符号，然后在完成后再次隐藏它。

$( document ).ajaxStart( function() {
    $( '#loading' ).css( 'display', 'block' );
} );

$( document ).ajaxStop( function() {
    $( '#loading' ).css( 'display', '' );
} );

当你点击提交按钮时，HTML onclick说要转到这个功能正常的工作：

function submit( button ) {
    var table = $( button ).closest( '.popup' ).find( 'table:first' );

    var verified = verifyTable( table );

    if ( verified == -1 ) {
        return -1;
    }

    if ( table.hasClass( 'campaigns' ) ) {
        campaign = table.find( '.campaign:first' );

        submitNewCampaign( campaign );
    } else if ( table.hasClass( 'groups' ) ) {
        groups = table.find( 'tr.group' );

        for ( var i = 0; i < groups.length; ++i ) {
            submitNewGroup( groups.eq( i ) );
        }
    } else if ( table.hasClass( 'keywords' ) ) {
        keywords = table.find( 'tr.keyword' );

        for ( var i = 0; i < keywords.length; ++i ) {
            submitNewKeyword( keywords.eq( i ) );
        }
    }

    closePopup();
}

如果从那里你被发送到提交NewCampaign（），一切正常。

function submitNewCampaign( campaign ) {
    // Set campaign variables

    $.ajax({
        url : '/ajax/addCampaign',
        type : 'POST',
        data : { // set campaign data },
        success : function( result ) {
            // get all groups in campaigns and loop through
            for ( var i = 0; i < groups.length; ++i ) {
                // set group variables

                $.ajax({
                    url : '/ajax/addGroup',
                    type : 'POST',
                    async : false,
                    data : { // set group data },
                    success : function( result ) {
                        // get all keywords in group and loop
                        for ( var i = 0; i < keywords.length; i++ ) {
                            // set keyword variables 

                            $.ajax({
                                url : '/ajax/addKeyword',
                                type : 'POST',
                                async : false,
                                data : { // set keyword data },
                                success : function( result ) { // done },
                                error : function( result ) {
                                    alert( "error adding new keyword (name - " + keyword_name + ")");
                                    console.log( result );
                                }
                                );
                        }
                    },
                    error : function( result ) {
                        alert( "error adding new group (name - " + group_name + ")" );
                        console.log( result );
                    }
                });
            }
        },
        error : function( result ) {
            alert( "error adding new campaign (name - " + campaign_name + "): " + JSON.parse( xhr.responseText ) );
        }
    });
}

但是，如果您要发送到submitNewGroup（）或submitNewKeyword（），则不会显示加载图像。

function submitNewGroup ( group ) {
    // set group variables

    $.ajax({
        url : '/ajax/addGroup',
        type : 'POST',
        async : false,
        data : { // set group data },
        success : function( result ) {
            // get all keywords in group and loop

            for ( var i = 0; i < keywords.length; ++i ) {
                // set all keyword variables 

                $.ajax({
                    url : '/ajax/addKeyword',
                    type : 'POST',
                    async : false,
                    data : { // set all keyword data },
                    success : function( result ) { // done },
                    error : function( result ) {
                        console.log( result );
                    }
                });
            }
        },
        error : function( result ) {
            console.log( result );
        }
    });
}

function submitNewKeyword( keyword ) {
    // set keyword variables
    $.ajax({
        url : '/ajax/addKeyword',
        type : 'POST',
        async : false,
        data : { // set keyword data },
        success : function( result ) { //done },
        error : function( result ) {
            console.log( result );
        }
    });
}

重要提示：调用三个函数中的任何一个时，日志中不会出现错误。这三个人都完成了他们分配的任务而没有任

Answer 1

我尝试了一些东西，使其工作的是：我从群组和关键字的最外面的ajax调用中删除了异步

ajaxStart - 更改显示并不总是有效

1 个答案: