web-dev-qa-db-ja.com

を使って関数を表示する AJAX

カスタムプラグインを使用してAJAXを使用して関数を表示しようとしています。しかしうまくいかないようです。

私のJavascript

(function($) {
$(document).on( 'click', 'a.mylink', function( event ) {
    $.ajax({
    url: testing.ajax_url,
        data : {
        action : 'diplay_user_table'
    },
    success : function( response ) {
        jQuery('#user_reponse').html( response );
    }


})
})
})(jQuery);

私のPHP

add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
function ajax_test_enqueue_scripts() {
    wp_enqueue_script( 'test', plugins_url( '/test.js', __FILE__ ), array('jquery'), '1.0', true );
    wp_localize_script( 'test', 'testing', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ));
}

add_action('wp_ajax_my_action', 'diplay_user_table');

function diplay_user_table() {
    echo "function is loading in div";
}

リンクをクリックすると、単に「0」と表示されます。何か案は？

functionsjqueryajax
2
aido14

あなたはwp_ajaxに関数を正しくフックしていません。 my_action部分を、in AJAXリクエストで使用しているアクション名に置き換える必要があります。あなたの場合はdisplay_user_tableです。ログアウトしたユーザーにも機能するように、wp_ajax_noprivにフックする必要もあります。これがあなたのフックです。

add_action('wp_ajax_diplay_user_table', 'diplay_user_table');
add_action('wp_ajax_nopriv_diplay_user_table', 'diplay_user_table');
function diplay_user_table() {
    echo "function is loading in div";
    wp_die();
}
3
Jacob Peattie

最後まですべてのAJAX要求を追いかけている煩わしい0を取り除くには、より速くより速い方法を使用できます。 REST AP​​Iエンドポイントを使用することで、ログインしているユーザーとログインしていないユーザーに対して異なるアクションを記述する必要がなくなります。

これは簡単な例です。

add_action( 'rest_api_init', function () {
    register_rest_route( 'aido14', '/my_path/', array(
            'methods' => 'GET', 
            'callback' => 'diplay_user_table' 
    ) );
});
// Callback function
function diplay_user_table() {
    $data['test1'] = "function is loading in div";
}
add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
function ajax_test_enqueue_scripts() {
    wp_enqueue_script( 'test', plugins_url( '/test.js', __FILE__ ), array('jquery'), '1.0', true );
    wp_localize_script( 'test', 'testing', array(
        'ajax_url' => site_url()
    ));
}

そしてあなたのJavaScript：

(function($) {
    $(document).on( 'click', 'a.mylink', function( event ) {
        $.ajax({
            url: testing.ajax_url + '/wp-json/aido14/my_path',
            data : { parameter-here : value-here 
        },
        success : function( response.test1 ) {
            jQuery('#user_reponse').html( response );
        }
    });
})
})(jQuery);

さて、あなたは/wp-json/aido14/my_pathを訪問することによって同じ結果を得る。モバイルアプリでも使用できるきちんとしたJSONレスポンス。

また、ご覧のとおり、配列に格納することで、1つのリクエストに複数のレスポンスを渡すことができます。これは連絡先やログインフォームなどで役に立ちます。

1
Jack Johansson