wordpressのAjax通信を基礎的なレベルで解説します。
おおまかな流れは
●jsの値をajaxでPOSTに乗せる。
●wp-admin/admin-ajax.phpに送られて動的にdo_action( “wp_ajax_{$action}” );される。
●このとき該当するフックとコールバックはあらかじめ作っておく。
add_action( ‘wp_ajax_test’, ‘ajax_test_func’ );
●wp-admin/admin-ajax.php内でdo_actionされてコールバック関数の戻り値を出力。
●それを最初のajaxを送信したコードが結果として受け取る。
こんな感じですね。
jsの値をajaxでPOSTに乗せる
基本的な使い方で
「jsで取得したり、計算したりした結果をphpに渡したい」
これを実装していきましょう。
jsの値
var hoge = ‘wpのajaxテスト’
これをPOSTに乗せて送ります。
今回Jqueryを使います。
$(function(){
var hoge = 'wpのajaxテスト'
var s = {
url: 'https://example.com/wp-admin/admin-ajax.php',
type: 'POST',
cache: false,
}
s.data = "action=test&hoge="+hoge;（まずはここまで）
$.ajax( s ).done(function( response ){
alert(response)
}).fail(function( msg ){
alert('fail')
});
return false;
})
まずajax通信先を指定します。
オブジェクトsを作り、
url:'<?php echo home_url(‘/’); ?>wp-admin/admin-ajax.php’,
wp-admin/admin-ajax.phpへの絶対パスを指定してください。
通信方法はPOSTまたはGETを指定します。
cache:false,（通信情報をキャッシュに残さない）デフォルトです。通常これでいいでしょう。
オブジェクトsのdataとして
s.data = “action=test&hoge=”+hoge;
オブジェクトsを引数としてajaxを実行。
$_POST[‘action’]
$_POST[‘hoge’]
このようにPOSTされます。
wp-admin/admin-ajax.phpに送る
wp-admin/admin-ajax.phpで
$_POST[‘action’]
$_POST[‘hoge’](ここでは使いません）
これを受け取ります。
$action = $_POST[‘action’];
do_action( “wp_ajax_{$action}” );
この形でdo_actionが実行される。
今回は$_POST[‘action’]の値は’test’なので、
do_action( “wp_ajax_test” );になります。
該当するフックとコールバックはあらかじめ作っておく
フック「wp_ajax_test」とコールバック関数はあらかじめ作っておきます。
テーマ内のfunctions.phpに書きましょう。
function ajax_test_func(){
$rec = isset($_POST['hoge'])?$_POST['hoge']:'';
function test($rec){
echo $rec;
}
die(test($rec));//dieをつけないと「0」が足されて返される。
}
add_action('wp_ajax_test', 'ajax_test_func');
$_POST[‘hoge’]を受け取ってその値をechoしてます。
コールバック関数の戻り値を出力
functions.phpに書いたコールバック関数 function wp_ajax_test() の出力先は
wp-admin/admin-ajax.php内の
do_action( “wp_ajax_{$action}” );の部分です。
実際はdo_action( “wp_ajax_test” );
ここに’wpのajaxテスト’が出力されます。
最初のajaxを送信したコードが結果として受け取る
出力された結果をdoneで受け取ります。
$(function(){
var hoge = 'wpのajaxテスト'
var s = {
url: 'wp-admin/admin-ajax.php',
type: 'POST',
cache: false,
}
s.data = "action=test&hoge="+hoge;
$.ajax( s ).done(function( response ){ （ここで受け取る）
alert(response)
}).fail(function( msg ){
alert('fail')
});
return false;
})
doneのfunctionの引数responseがajaxの戻り値です。
ここではテキストを送っているので単純にalertして確認します。
alertで’wpのajaxテスト’が表示されます。
おしまい。