web-dev-qa-db-ja.com

実行する AJAX 次々にリクエスト AJAX リクエスト終了

あるJSファイルがajax呼び出しを行っています。このAjax呼び出しの成功の中で、別のAJAX呼び出しが行われます。 2回目の呼び出しでは、電子メールがすでに登録されているかどうかを確認します。その場合、2回目のAJAX呼び出しでは、FirebugおよびChromeコンソールに示されているように返されたデータは受信されません。しかし、前述の問題はオンラインサーバーでのみ発生しますが、同じコードはlocalhostでも問題なく動作します。

ホストされているページはhttp://twmobilefitness.com/signup/です。最後に '今すぐ登録' リンクをクリックすると問題が発生します。問題が発生したい場合は、同じ電子メールアドレスで2回登録する必要があります。

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();
}

オンラインサーバーでコードを機能させる方法は？

ajax
5
Istiaque Ahmed

あなたが経験していること（AJAXはローカルでは動作しますが、サーバーでは動作しません）には遅延の問題があります。ローカルではすべてが高速に動作しますが、それはできませんseeあなたの問題。要するに、これはあなたの問題です：

AJAXコールバック（A）が実行されます> AJAXコールバック（B）は待機する必要があることを認識していません（A）>（A）も終了しているため、ローカルインストールで問題を確認できません速い。

そのため、コールバック（B）に（A）を待つ必要があることを伝える方法を見つける必要があります。方法は次のとおりです。

スクリプトを登録し、PHPからJSにデータを移動します

データを正しい方法で登録およびエンキューおよびローカライズする：関数またはメソッドにラップして、wp_enqueue_scripts（public/themes）、login_enqueue_scripts（password/login/register）、または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を適切な方法で使用する方法。

使用できる関数はいくつかあります。 デフォルト$.ajax({});関数 またはそのショートカット$.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 || {} );

さらに詳しくそして本当に正しい方法でしたい場合は、メソッドチェーンを使用する必要があります。 （まだ改善の余地があります）。

( 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またはAMD とその違いをご覧ください。

他のAJAX応答を待っています

興味深い-そしてjQuery（およびその他のライブラリ）全体の中で最も強力な部分AJAX処理-問題は、wait untilAが終了してから開始Bおよびその処理。答えは「遅延」ローディングと「約束」です。

簡単な例を追加します。 this.を介してオブジェクトに追加することで、ビルドとオブジェクトを分離し、内容を分離することを検討する必要がありますが、例としては以下で十分です。

例（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 || {} );

例（B）このように試したことはありませんが、shouldも機能します。読みやすくなりましたが、$.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 || {} );

さらに詳しく知りたい場合は、 deferredおよびthenに関するドキュメント をお読みください。

12
kaiser

別のAJAXリクエストを終了した後に1つのAJAXリクエストを実行するには、以下の1行を追加する必要があります。

 
 async：false、

つまり、以下のようにajaxメソッドにasync: falseを追加する必要があります。

 $。ajax（{
 url：base_url + "/ wp-admin/admin-ajax.php"、
タイプ： 'GET'、
 async：false 、
0
Jeyakumar T