WordPressでaxiosからAjax使った際の400エラー

今回はよくあるアクション名の間違いの400エラーではなく、axiosを使ったら送信方式が違った話。

WordPressでAjax処理する方法

WordPressでAjaxを使う方法の解説 | hijiriworld Web
WordPressでAjaxを使う方法の解説 | hijiriworld Web

よくある400エラー

ajaxのactionを間違えると400エラーが返ってきます。

add_action('wp_ajax_アクション名 ', 'update_custom_field' );
add_action('wp_ajax_nopriv_アクション名 ', 'update_custom_field' );
$.ajax({
    type: 'POST',
    url: ajaxUrl,
    data: {
        'action' : 'アクション名(ここの名前を間違える方が多い)',
    }
});

今回のエラー

ブラウザの時にaxiosのPOSTの値が送信されない?そんなことはない - Qiita
#はじめに 最近Vue.jsをよく触るようになって、Ajax使いたいなら ( を使うといいよとVue.js公式も言っていたので使っていろいろ試して...

axiosはデフォルトがjsonなので以下のようにリクエストする必要があります。

var params = new URLSearchParams();
    params.append('action', 'ctr');
    params.append('post_id', CTRPostId);
    params.append('meta_key', CTRItems);
    // ajax送信処理
    axios.post(CTRAjaxRoot, params)

コメント