Wordpress AJAX 400 при регистрации в плагине шорткодов

Question

Я пишу собственный шорткод, который после некоторого пользовательского события должен будет вызывать некоторый файл PHP через AJAX. Но я получаю Bad Request 400, как будто мои действия wp_ajax_ * не регистрируются.

Я попытался изменить порядок, в котором я добавляю действия и ставлю в очередь свои сценарии, но, похоже, ничего не работает.

Вот мой простой код плагина

function aj_ajax_demo_shortcode() {
    return '<h4>Shortcode</h4>';
}
add_shortcode( 'ajax_demo', 'aj_ajax_demo_shortcode' );

add_action( 'wp_ajax_nopriv_aj_ajax_demo', 'aj_ajax_demo_process' );
add_action( 'wp_ajax_aj_ajax_demo', 'aj_ajax_demo_process' );
function aj_ajax_demo_process() {
    wp_send_json((object) array('msg' => 'hello world'));
}

add_action( 'wp_enqueue_scripts', 'aj_enqueue_scripts' );
function aj_enqueue_scripts() {
    wp_enqueue_script(
        'aj-demo', 
        plugin_dir_url( __FILE__ ) . 'aj-demo-ajax-code.js'
    );

    wp_localize_script(
        'aj-demo',
        'aj_ajax_demo',
        array(
            'ajax_url' => admin_url( 'admin-ajax.php' ),
            'aj_demo_nonce' => wp_create_nonce('aj-demo-nonce') 
        )
    );
}

И JS:

fetch(aj_ajax_demo.ajax_url, {
    method: 'POST',
    data: {
        action : 'aj_ajax_demo',
        nonce : aj_ajax_demo.aj_demo_nonce,
    }
}).then(response => {
    if (response.ok) {
        response.json().then(response => {
            console.log(response);
        });
    }
});

Я изо всех сил стараюсь, чтобы моя функция AJAX была даже вызвана, и я не вижу, где я что-то сделал неправильно, особенно учитывая небольшой объем кода, который у меня есть.

Answer 1

Вы не отправляете никакую переменную post на сервер. Используйте FormData()

  var formData  = new FormData();
  formData.append('action','aj_ajax_demo');
  formData.append('nonce',aj_ajax_demo.aj_demo_nonce);

и затем:

fetch(aj_ajax_demo.ajax_url, {
    method: 'POST',
    body: formData
}).then(response => {
    if (response.ok) {
        response.json().then(response => {
            console.log(response);
        });
    }
});