WordPressのadmin-ajax.phpを用いる際にFormDataで複数の値を送る方法(メモ)

最終的には想定した形になったものの、そこに到るまでに余計なことをしたせいなのか時間がかかったのでメモとして。

どう見ても前に試して動かなかった書き方なのに今試すと動いた。というのはたまにありますよね…。

実現したいこと

• WordPressでajax
• JS側はXMLHttpRequestとFormDataを用いる
• admin-ajax.phpに複数の値を渡す

参考サイト

1. Ajaxを使ってWordPressからコンテンツを取得したい。
2. WordPressでAjaxする方法をざっくりまとめておく
3. FormData オブジェクトの利用

JSの読み込み方法や値を渡す書き方などはいろいろあります。例えば上記参考サイトの1と2を見ると違いはわかりやすいでしょう(記事執筆時点では2のコードが見辛くなっているので各自整形して確認のこと)。

サンプル

完全なサンプルではなく部分になります。一応前項の1がベースです。

今回は前提としてPHP側(functions.phpなど)で、ajax用のJS読み込み設定や、PHPからJSに値を渡すための設定(wp_localize_script)を行います。

//onClickなりaddEventListenerなりで作動させる関数
function sendData() {
  let XHR = new XMLHttpRequest();
  let FD  = new FormData();

  //キーのactionはadmin-ajax.phpを使うために必須
  FD.append('action' , myaction);
　//上記以外はキーも数も自由に設定可能なので、複数の値を送る場合は以下ように記述
  FD.append('postid' , mypostid); //←ここで値を追加できる
  FD.append('nonce' , mynonce); //←ここで値を追加できる

  XHR.addEventListener('load', function(event) {
    console.log('ok');
  });
  XHR.addEventListener('error', function(event) {
    console.log('Oups!');
  });
  XHR.open('POST', ajaxurl); //ajaxurlは各サイトのadmin-ajax.phpへのパスを入れる
  XHR.send(FD);
}

上記が当記事の目的で、以下に該当部分だけを抜き出します。

//ここで複数の値をappendで送ることができる
//キーのactionはadmin-ajax.phpを使うために必須だが、あとは自由に設定可能
//キーのaction以外は適当に記述
FD.append('action' , myaction);
FD.append('postid' , mypostid);
FD.append('nonce' , mynonce);

単純な話で、単にappendメソッドを複数書けば良いだけでした。

PHP側のadmin-ajax.phpを使う際に必須なのはactionというキーであり、このキーをaction以外の名称に変更すると動作しません(試した範囲ではそのはず)。

逆にいえばキーにactionさえあれば、他に複数のキーと値をappendで追加しても問題はありません。

結び

何か他の部分で書き方を間違っていたようで、当初はappendを複数書いたらエラーになり検索やら試作やらを繰り返していました…。