在另一个AJAX请求完成后执行一个AJAX请求

时间:2013-10-14 作者:Istiaque Ahmed

一个JS文件正在进行ajax调用。在这个ajax调用成功之后,又进行了一个ajax调用。第二次呼叫检查电子邮件是否已注册。如果是,则第二个AJAX调用不会收到返回的数据,如本例中firebug和Chrome控制台所示。但相同的代码在localhost中运行良好,而上述问题只发生在在线服务器中。

托管页面位于http://twmobilefitness.com/signup/. 单击末尾的“立即注册”链接时,就会出现问题。如果你想让问题发生,你必须使用相同的电子邮件地址注册两次。

JS公司:

$.ajax( {
    url : base_url+"/wp-admin/admin-ajax.php",
    type : \'GET\',
    cache : false,
    data : \'action=check_user_name&\'
           + Math.floor( ( Math.random() * 100 ) +1 )
           + \'&user_name=\'+user_name,
    success : function( result ) {
        if ( parseInt( result ) == 0 ) {
            $( ".result" ).html( \'<span class="error">User name not available </span>\' );
        } else if ( parseInt( result ) == 1 ) {
            $.ajax( {
                url : base_url 
                    + "/wp-admin/admin-ajax.php",
                type : \'GET\',
                cache : false,
                data : \'action=check_email_used&\'
                    + Math.floor( ( Math.random() *100 ) +1 )
                    + \'&email=\' + email,
                success : function( result_email ) {
                    if ( parseInt( result_email ) == 0 ) {
                        $( ".result" ).html( \'<span class="error">Email already used </span>\' );
                    } else if ( parseInt( result_email ) == 1 ) {
                        $( ".result" ).html( \'\' );      
                        $( ".signup_div" ).hide();
                        $( ".signup_emergency_contact" ).show();
                    }
                }
            } );
        }
    }   
} );    
functions.php

add_action(\'wp_ajax_check_user_name\',\'check_user_name\');
add_action(\'wp_ajax_nopriv_check_user_name\',\'check_user_name\');

add_action( \'wp_ajax_check_email_used\',\'check_email_used\' );
add_action( \'wp_ajax_nopriv_check_email_used\',\'check_email_used\' );
function check_user_name() {
    global $wpdb;

    $user_name = trim( $_GET[\'user_name\'] );
    $MobTraining = new MobTraining();
    $table =trim( "{$wpdb->prefix}users" );
    $array_where[\'user_login\'] = $user_name;
    $sql_fetch = $MobTraining->fetch( $table, $array_where );
    $row = $wpdb->get_results( $sql_fetch, ARRAY_A );
    if ( sizeof( $row ) != 0 ) {
        echo \'0\';
    } else {
        echo \'1\';
    }
    die();
}

function check_email_used() {
    global $wpdb;

    $email = trim( $_GET[\'email\'] );
    $MobTraining = new MobTraining();
    $table = trim( "{$wpdb->prefix}users" );
    $array_where[\'user_email\'] = $email;
    $sql_fetch = "SELECT * FROM $table WHERE `user_email`=\'$email\'";
    $row = $wpdb->get_results( $sql_fetch, ARRAY_A );
    if ( sizeof( $row ) != 0 ) {
        echo \'0\';
    } else {
        echo \'1\';
    }
    die();
}
如何使代码在联机服务器中工作?

2 个回复
SO网友:kaiser

您所经历的(AJAX在本地工作,但不在服务器上)存在延迟问题。在本地,一切都运行得很快,以至于你看不到你的问题。简而言之,这就是你的问题:

AJAX回调(A)执行>;AJAX回调(B)不知道必须等待(A)>;您无法在本地安装中看到问题,因为(A)完成得太快。

因此,您需要找到一种方法,告诉您的回调(B)它必须等待(a)。方法如下:

注册脚本并将数据从PHP移动到JS,以正确的方式注册和排队并本地化数据:将其包装在函数或方法中,并将其挂接到wp_enqueue_scripts (公共/主题),login_enqueue_scripts (密码/登录/注册)或admin_enqueue_scripts. 使用wp_localize_script() 将数据从PHP移动到JS并使其可在那里访问。

add_action( \'admin_enqueue_scripts\', \'wpse118772jsObject\' );
function wpse118772jsObject()
{
    $scriptHandle = \'custom-script-name\';
    // Should be divided into separate functions or methods
    wp_register_script(
        $scriptHandle,
        plugins_url( __FILE__, \'your/path\' ),
        array( \'jquery\' ),
        plugin_dir_path( __FILE__ ).\'your/path\' ),
        true
    );

    wp_enqueue_script( $scriptHandle );

    wp_localize_script(
        $scriptHandle,
        \'pluginObject\',
        array(
                \'ajaxURl\' => admin_url( \'admin_ajax.php\' ),
                \'custom\'  => array(
                        // custom data in here
                ),
        ),
    );
}
如何正确使用jQuery AJAX

您可以使用以下几个功能:default $.ajax({}); function 或者他们的快捷方式$.post();, $.getJSON();, 等

因此,您可以简单地使用以下内容—使用success/fail 对象方法。

( function( $, plugin ) {
    "use strict";

    $.ajax( {
        url : plugin.ajaxURl,
        data : {
            // other data
        },
        // We assume you\'re responding with a proper wp_send_json_success/error() in the PHP Cb.
        dataType : "json",

        // Request transformation possible in here.
        beforeSend : function( xhr ) {
            // Example:
            // xhr.overrideMimeType( \'application/json\' );
        },

        // The actual handlers
        success : function( data, textStatus, jqXHR ) {
            // Handle data transformation or DOM manipulation in here.
        },
        error : function( jqXHR, textStatus, errorThrown ) {
            // silent: Log the error
            console.info( errorThrown );
            // loud: Throw Exception
            throw errorThrown;
        }
    } );
} )( jQuery, pluginObject || {} );
如果您想更深入地了解and do things really the right way,则必须使用方法链接。(还有改进的余地)。

( function( $, plugin ) {
    "use strict";

    $.ajax( {
        url : plugin.ajaxURl,
        data : {
            // other data
        },
    } )
        .done( function( data ) {
            // Handles successful responses only
        } )
        .fail( function( reason ) {
            // Handles errors only
            console.debug( reason );
        } )
        .always( function( data, textStatus, response ) {
            // If you want to manually separate stuff
            // response becomes errorThrown/reason OR jqXHR in case of success
        } )
        .then( function( data, textStatus, response ) {
            // In case your working with a deferred.promise, use this method
            // Again, you\'ll have to manually separates success/error
        } );
} )( jQuery, pluginObject || {} );
注意:有关回调包装器的更好示例,请参见commonjs or AMD 以及它们的区别。

等待其他AJAX响应整个jQuery(和其他库)AJAX处理中有趣且最强大的部分是如何等待A完成,然后开始B及其处理。答案是;“延期”;加载和“;承诺;。

我将添加一个快速示例。您可能应该考虑构建和对象,并通过this. 对于对象,但对于一个示例,以下内容应该足够了:

Example (A)

( function( $, plugin ) {
    "use strict";

    $.when(
        $.ajax( {
            url :  pluginURl,
            data : { /* ... */ }
        } )
           .done( function( data ) {
                // 2nd call finished
           } )
           .fail( function( reason ) {
               console.info( reason );
           } )
        )
        // Again, you could leverage .done() as well. See jQuery docs.
        .then( 
            // Success
            function( response ) {
                // Has been successful
                // In case of more then one request, both have to be successful
            },
            // Fail
            function( resons ) {
                // Has thrown an error
                // in case of multiple errors, it throws the first one
            },
        );
} )( jQuery, pluginObject || {} );
Example (B)$.when() 解决承诺更多。

( function( $, plugin ) {
    "use strict";

    $.ajax( {
        url : plugin.ajaxURl,
        data : {
            // other data
        }
    } )
        .done( function( data ) {
            // Handles successful responses only
        } )
        .fail( function( reason ) {
            console.info( reason );
        } )
        // Promise finished:
        .then( function( data ) {
            $.ajax( {
                url :  pluginURl,
                data : { /* ... */ }
            } )
                .done( function( data ) {
                    // 2nd call finished
                } )
                .fail( function( reason ) {
                    console.info( reason );
                } );
        } );
} )( jQuery, pluginObject || {} );
如果你想更深入地了解,请阅读the Docs about deferred and then.

async/ await

EDIT

记住async/await 仍然处理承诺。这只是合成糖。还要记住什么this 使用中所示的速记功能时,指handlerB().

这甚至可以用于jQuery。

( function( $, plugin ) {
    const handlerA = async function( plugin ) {
        try {
            let res = await $.ajax( {
                url : plugin.ajaxURl,
                data : { /* some data */ }
            } )
                .done( function( data ) {
                    // Handles successful responses only
                } )
                .fail( function( reason ) {
                    console.error( reason );
                } )
            return res;
        } catch ( err ) {
            console.error( err )
        }
    }
    const handlerB = async data => { /* yet another AJAX request */ }

    // Execute
    // …wait…
    let $resultA = await handlerA( plugin )
    // Now exec B
    let $resultB = await handlerB( $resultA )

    // Do something with $resultB

} )( jQuery, pluginObject || {} );

SO网友:Jeyakumar T

要在完成另一个AJAX请求后执行一个AJAX请求,您必须添加下面的一行,

 
    async: false,
i、 e,您需要添加async: false 在下面的ajax方法中,

$.ajax( {
    url : base_url+"/wp-admin/admin-ajax.php",
    type : \'GET\',
    async: false,

结束