web-dev-qa-db-ja.com

基本的なワードプレス AJAX コール

私は新鮮なWPインストールを持っています、そして物事を単純に保つために私は現在私のfunctions.phpで以下のような単純なアクションをただ持っています：

function getFruits() {
    return json_encode( ['fruits' => ['apples', 'pears']]);
} 

function my_enqueue() {    
    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );

    wp_localize_script( 'ajax-script', 'my_ajax_object',
        array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

さて、私の目的はJQuery/JavaScriptを使って私のwordpressエンドポイントをAJAX呼び出し、そしてランディングページをレンダリングするときに単にfruit jsonオブジェクトを戻してそれをコンソールに印刷することです。

これが私が試したことです。

twentyseventeen\js\my-ajax-script.js：

$(document).ready(function() {
    $.ajax(
        {
            type: "get",
            data : {
                action: 'getFruits'
            },
            dataType: "json",
            url: my_ajax_object.ajax_url,
            success: function(msg){
                console.log(msg); //output fruits to console
            }
        });
});

現在、JQueryが定義されていないというエラーが発生していますが、キューに入れられているようです。第二に、私はこれまで正しくWP AJAXを使ったことがないので、これを正しく実装することすらできません。だから今、私の目的は基本的な例を動かすことです。これを達成する方法についての提案をいただければ幸いです。

ありがとうございました

jqueryajaxapi
2
AnchovyLegend

WordPress AJAXはアクションを使ってjQueryのactionを従来のWordPressのアクションと結びつけます。 WordPressが彼らのドキュメントで提供している の例を見てください 。 2つのフックがあります：

add_action( "wp_ajax_{$jquery_action_string}", "callback_function_name" );

上記は認証された（ログインされた）ユーザーに対してのみ機能します。ログインしていないユーザーにはnoprivを使います。

add_action( "wp_ajax_nopriv_{$jquery_action_string}", "callback_function_name" );

したがって、私たちの場合は、両方を使用します。

function return_fruits() {
    echo json_encode( ['fruits' => ['apples', 'pears']]);
    exit();
}
add_action( 'wp_ajax_getFruits', 'return_fruits' );
add_action( 'wp_ajax_nopriv_getFruits', 'return_fruits' );

Ajaxアクションとコールバック名が同一である必要がないことを識別するために、コールバック関数名を変更しました。また、あなたはそれを返す代わりに echo このデータを使いたいでしょう。

4
Howdy_McGee

あなたはあなたのjqueryアクションを実行するためにajaxアクションフックを使わなければなりません。

ログインユーザーの場合：

add_action('wp_ajax_getFruits', 'getFruits);

ログインしていないユーザーの場合：

add_action('wp_ajax_nopriv_getFruits', 'getFruits');

function get_fruits(){
$response = array('Fruits'=> ['banana', 'Apple']);
//use this function and make a response then send the response
wp_send_json_success(array('response'=>$response));
// by using wp_send_json_success() you don't need to exit and parse response
}
0
Jitender Singh