📑
Ajax通信のアクション名でハマったこと
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