📑

Ajax通信のアクション名でハマったこと

2024/02/22に公開

wordPressのカウントダウンのプログラムを、wordPressのプラグインとして作りました。
その中で、PHPとショートコードで表示しているJavascriptのコードで、データのやり取りが必要になりました。
それで、Ajax通信を使いました。
その際に、400番エラーが出たのですが、解決するまで時間がかかってしまい学びがありました。
私の備忘録の意味も込めて、書きたいと思います。

結論

wp_ajax_nopriv_とwp_ajax_に続く部分は、Ajaxのアクション名になります。

私は、Ajax通信のアクション名を、PHPの関数名と同じものにしていました。
これが原因だったのです。

こちらの画像に、例を示しました。

add_action('wp_ajax_nopriv_ ajax_my_action ', 'ajax_my_fun ');
add_action('wp_ajax_ ajax_my_action ', 'ajax_my_fun ');


function ajax_my_fun ()
{

}

上記のコードで、ajax_my_actionの部分が、アクション名です。
二つあるのは、wordPressにログインしている人と、ログインしていない人のそれぞれで、働くように、同じアクション名で二つ設定しています。

このアクション名を間違えると、400番のエラーで不正なアクセスになってしまいます。

こちらの画像に、JavascriptのAjax通信のコードの例を示します。

成功例

こちらがエラー処理です。

こちらが、Javascriptのコードの例です。

  function updateSeatsLeft(hoge) {
    $.ajax({
      url: AjaxUrl, //admin-ajax.phpのURL
      type: "POST",
      data: {
        action: "ajax_my_action", //アクション名
        hoge: hoge, //PHPに送るデータ
        nonce: nonce, //セキュリティ対策
      },
      success: function (response) {
        console.log("成功")
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.log("XMLHttpRequest : " + XMLHttpRequest.status);
        console.log("TextStatus : " + textStatus);
        console.log("errorThrown : " + errorThrown);
      },
    });
  }

Ajax通信のステータスで500番のエラーのときは、フックしている関数の中で、文法間違いなどがある可能性があります。

Discussion