fetchを使ってWordPressとAJAX通信
WordPressサイトでAJAXを介してデータをフロントエンドのJavaScriptプログラムに取り込む場合、jQueryのajax()をもっぱら利用しています。
ところで最近のJavaScriptは、非同期処理を扱うためのPromiseが実装され、AJAX通信を扱うfetchがPromiseを返すことで容易にデータを受け取れるようになりました。
Promiseやfetchは関数なのかオブジェクトなのか、自分はC言語世代の年寄りのため理解がなかなか追いつきません。JavaScriptではデータとメソッドが渾然一体となっており、どちらもオブジェクトとして扱うように考えています。
Promiseもfetchも最近知ったものですので、詳細は調べてください。
WordPressのajaxメソッドにPOST
WordPressでAJAX通信を利用して処理結果を得るための仕掛けは、後で触れます。ここでは自分と同様、400エラーから抜け出したい方にその方法を先に説明します。
fetch()実行の際オブジェクトパラメータの「body」にPOSTデータを渡すとき、「JSON.stringify()」では解決しないため「URLSearchParams」オブジェクトを指定することで成功しました。
let params = new URLSearchParams();
params.append('action', 'ajax_func');
fetch('https://…/wp-admin/admin-ajax.php', {method: 'post', body: params}).then(function (response) {
if (response.ok) {
response.text().then(function (text) {
alert(text);
});
}
});
サーバー側で「$_POST[‘action’]」の内容を「’ajax_func’」として受け取り、WordPressの「’wp_ajax_ajax_func’」で指定したメソッドへ処理を渡すことに成功しました。
add_action('wp_ajax_ajax_func', 'proc_ajax');
function proc_ajax () {
die('hello');
}
WordPressでAJAX処理
WordPressでは「wp-admin/admin-ajax.php」がAJAX通信するときのエントリーで、実行する関数名を「action」パラメータにセットして渡します。
上記の例は「ajax_func」という名前を指定すると、add_actionで予め設定していた「proc_ajax()」関数が実行される、という算段です。
データはGETなりPOSTなり、グローバル変数を利用します。
セキュリティ対策としてnonceは必須ですのでお忘れなく。
参考記事
今回お世話になった記事です。ありがとうございました。