WPでサイトを構築した場合、DBから情報をAjaxで取得したいときは、admin-ajax.phpというファイルを利用して通信を行うのが普通なんだそう。
色々と手続きが面倒だったけど、セキュリティ的にも何かファイル生成して行うよりかは準備されているファイルを利用してという方がまだ安全なんだろう。
ただ、なんか色々と面倒だったから、次回はスムーズに構築できるよう一先ず記録していきます。
まずはfunction.phpにwp_head()でadmin-ajax.phpまでのリンクパスを変数に代入するというスクリプト文を吐き出すという関数を追加しておきます。
function js_params() {
?>
<script>
let ajaxUrl = '<?php echo esc_html(admin_url( 'admin-ajax.php')); ?>';
</script>
<?php
}
add_action('wp_head', 'js_params');
次に、Ajaxで呼び出されて何かしらを処理する関数を作成します。
function get_data() {
require_once( ABSPATH.'wp-load.php');
global $wpdb;
global $db_table;
$nonce = $_REQUEST['nonce'];
if ( wp_verify_nonce( $nonce, 'my-ajax-nonce' ) ) {
$result = null;
$search_date = $_POST['postData'];
$result = ここにDBへ命令しデータ取得する機能を入力;
echo json_encode($result);
}
die();
}
add_action( 'wp_ajax_get_data', 'get_data' );
add_action( 'wp_ajax_nopriv_get_data', 'get_data' );
Ajaxを利用する側は以下のような文でadmin-ajax.phpに命令をかけます。
$.ajax({
type: 'POST',
url: ajaxUrl, // wp_head()で出力されたスクリプトで変数を設定済み
data: {
'action' : 'get_data', // function.phpに用意した関数名
'formData' : {'fluit': 'ばなな', 'food' : 'カレー'}, // ポストするデータのキー名
'nonce': '<?php echo wp_create_nonce( 'my-ajax-nonce' ); ?>'
},
async : false,
success: function( response ) {
console.log( response );
var results = JSON.parse(response); // Json型から元に戻す
}
});
命令を受け取る側（function.php）でデータを返すときはreturnではなくechoで文字出力でないとajaxした側はデータは受け取らいんだそう。そして、json型でデータを出力して、受け取り側でjson型から元の形式に戻すというやり方でないと上手くいかなかった。returnではなくecho、覚えておこう。