Не работает JS fetch() для WP ajaxurl.url, а jQuery.ajax() при этом работает.
Почему qjuery проходит:
$.ajax({
url: ajaxurl.url,
type: 'POST',
data: {'action' : 'add_aplication', 'info' : 'some info'},
success: function (response) {
console.log(response);
}
});
, а vanilla JS fetch возвращает ошибку 400:
fetch(ajaxurl.url, {
method: "POST",
body: {'action' : 'add_aplication', 'info' : 'some info'},
})
.then(response => response.text())
.then(response => {
console.log(response);
});
как правильно написать fetch?
Потому что для fetch нужно указать заголовок при котором данные попадут в $_POST массив PHP в итоге -
application/x-www-form-urlencoded.Если этого не сделать, то данные в PHP доступны только в
php://input, а ajax WP с этим источником данных не работает - только с супер-глобальными переменными $_POST $_GET.При этом данные передаваемые в body должны быть объектом URLSearchParams():
const requestData = { action : 'add_aplication', info : 'some info' } const queryData = new URLSearchParams(); for ( const key in requestData ) { queryData.set( key, requestData[ key ] ) } fetch(ajaxurl.url, { method: "POST", headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }, body: queryData, }) .then(response => response.text()) .then(response => { console.log(response); });Или FormData():
const form = document.querySelector( 'form.my-form' ); fetch( `${ajaxurl.url}?action=add_aplication`, { method: "POST", body: new FormData( form ), } ) .then( response => response.text()) .then( response => { console.log(response); } );Спасибо )
Получилось решить проблему?
Да, получилась )
Была задача отправить файл на сервер.
Спасибо )