web-dev-qa-db-fra.com

Brancher: AJAX interroger une API externe pour le synchroniseur avec les tables

Je prévois d’écrire un plugin qui se connecte à une API externe et synchronise des informations sur quelques tables de base de données.

Je veux le faire de la meilleure façon possible s'il y en a un. Je veux que l'utilisateur puisse cliquer sur un bouton sous les options de l'administrateur pour le plug-in et le faire manuellement en tant qu'option via cron.

Je suppose que le processus pouvait prendre quelques minutes. Je pensais donc utiliser une sorte de bouton et associer une action à commencer en utilisant jQuery pour se déclencher via AJAX et mettre une sorte de minuterie jusqu'à la fin.

Pour une raison quelconque, j’ai du mal à trouver le moyen d’y parvenir et j’espérais un peu d’orientation quant aux meilleures pratiques en utilisant WP fonctionnalités plutôt qu’un travail de piratage. Pendant un moment, mon œil a cessé de développer des plugins pour essayer de retrouver mes pieds.

ajaxadminsync
1
Jimbo

Croquis/Concept

Pour faire des demandes aux API distantes/externes, utilisez l'API HTTP WP . Des exemples plus détaillés/détails peuvent être trouvés dans certaines de mes réponses ici .

Ensuite, ajoutez simplement une page d'administrateur avec add_submenu_page() ou add_menu_page() ou les fonctions associées .

Enfin, ajoutez un script via wp_register/enqueue_script() sur le admin_enqueue_scripts- hook. Là, vous déclenchez un appel ajax (recherche d'archives) et mettez à jour vos tables.

Utilisez ajax dans les plugins

C'est assez simple. Voici une rapide maquette. Il montre tout ce qui est nécessaire pour faire tous les appels possibles AJAX. J'ai divisé l'enregistrement et la mise en file d'attente du script afin que vous puissiez le mettre en file d'attente où et quand vous en avez besoin.

Les nonces

Les vérifications des références et des nonces sont déjà implémentées pour des raisons de sécurité. Il utilise un schéma de nommage constant pour éviter les confusions (en particulier avec les contrôles de non-conformité).

OOP construit avec un nom partagé

Le PHP:

class WPSEexampleAJAX
{
    public $name = 'wpse';

    public function __construct()
    {
        add_action( 'wp_loaded', array( $this, 'scriptsRegister' ) );
        add_action( 'admin_enqueue_scripts', array( $this, 'scriptsEnqueue' ) );

        // Logged in users - everybody in Admin
        add_action( "wp_ajax_{$this->name}_action", array( $this, 'ajaxCb' ) );
        // Guests/not logged in
        add_action( "wp_ajax_nopriv_{$this->name}_action", array( $this, 'ajaxCb' ) );
        add_action( 'admin_enqueue_scripts', array( $this, 'scriptsLocalize' ) );
    }

    public function scriptsRegister( $page )
    {
        $file = 'WPSEexample.js';
        wp_register_script(
            $this->name,
            plugins_url( "assets/scripts/{$file}", __FILE__ ),
            array(
                'jquery',
                // 'add other possible dependencies in here',
            ),
            filemtime( plugin_dir_path( __FILE__ )."assets/scripts/{$file}" ),
            true
        );
    }

    public function scriptsEnqueue( $page )
    {
        wp_enqueue_script( $this->name );
    }

    public function scriptsLocalize( $page )
    {
        wp_localize_script( $this->name, "{$this->name}Object", array(
            'ajaxurl'          => admin_url( 'admin-ajax.php' ),
            '_ajax_nonce'      => wp_create_nonce( "{$this->name}_action" ),
            'action'           => "{$this->name}_action",
            'post_type'        => get_current_screen()->post_type,
            // 'foo'              => 'bar',
        ) );
    }

    public function ajaxCb()
    {
        $data = array_map( 'esc_attr', $_GET );

        check_ajax_referer( $data['action'] );

        // DO STUFF IN HERE

        wp_send_json_success( array(
            // 'foo' => 'bar',
        ) );
    }
}

Le JavaScript est un réel AJAX send/catch

Dans votre fichier JavaScript enregistré, vous déclenchez simplement l'appel ajax et récupérez le résultat. De nos jours, vous avez différents points où vous pouvez intercepter ou attraper le résultat. Le script ne fait rien, mais se connecte à la console. La wpseObject qui a été localisée a un alias dans l'appel de fonction, vous pouvez donc simplement utiliser plugin à la place. J'aime le faire de cette façon, ainsi je peux facilement identifier ultérieurement l'objet localisé (également plus court à écrire). C'est juste ma convention de nommage personnelle.

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

        $.ajax( {
            url  : plugin.ajaxurl,
            data : {
                action      : plugin.action,
                _ajax_nonce : plugin._ajax_nonce,
                foo         : plugin.foo,
            },
            beforeSend : function( d ) {
                console.log( 'AJAX Before send', d );
            }
        } )
            .done( function( response, textStatus, jqXHR ) {
                // console.log( 'AJAX done', data, textStatus, jqXHR, jqXHR.getAllResponseHeaders() );
            } )
            .fail( function( jqXHR, textStatus, errorThrown ) {
                console.log( 'AJAX failed', jqXHR.getAllResponseHeaders(), textStatus, errorThrown );
            } )
            .then( function( jqXHR, textStatus, errorThrown ) {
                console.log( 'AJAX after', jqXHR, textStatus, errorThrown );
            } );
} )( jQuery || {}, wpseObject || {} );

Plus d'informations sur les différentes parties de l'appel $.ajax()dans la documentation officielle de jQuery .

Astuce: Assurez-vous de toujours utiliser jQuery à partir de WordPress Core et pas de version CDN. Sinon, vous rencontrerez probablement des conflits ou des versions obsolètes au cas où un utilisateur mettrait à jour son noyau, mais pas votre plugin.

1
kaiser