web-dev-qa-db-fra.com

Afficher une fonction en utilisant AJAX

J'essaie d'afficher une fonction à l'aide de AJAX à l'aide d'un plugin personnalisé. Mais ne semble pas fonctionner.

Mon 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);

Mon 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";
}

Lorsque je clique sur le lien, il affiche simplement "0". Des idées?

functionsjqueryajax
2
aido14

Vous n'accrochez pas la fonction à wp_ajax correctement. Vous devez remplacer la partie my_action par votre nom d'action que vous utilisez dans la requête in AJAX. Dans votre cas, c'est display_user_table. Vous devez également le connecter à wp_ajax_nopriv pour qu'il fonctionne pour les utilisateurs déconnectés. Voici votre crochet avec ces changements:

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

Vous pouvez utiliser une méthode plus rapide pour vous débarrasser du 0 ennuyeux qui poursuit toutes les demandes AJAX jusqu'à la fin. En utilisant un noeud final d'API REST, vous n'avez pas besoin d'écrire des actions différentes pour les utilisateurs connectés et les utilisateurs non connectés.

Voici un exemple rapide:

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

Et votre 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);

Maintenant, vous obtenez le même résultat en visitant /wp-json/aido14/my_path. Une réponse JSON soignée que vous pouvez utiliser même dans les applications mobiles.

Et, comme vous pouvez le constater, vous pouvez transmettre plusieurs réponses dans une même demande en les stockant dans un tableau. Cela sera utile par exemple dans les formulaires de contact et de connexion.

1
Jack Johansson