WordPress как на ладони
rgbcode is looking for WordPress developers.

Не работает 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?

0
t.sergey
год назад
  • 0
    Kama9752

    Потому что для 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);
    	 } );
    t.sergey год назад

    Спасибо )

    Kama год назад

    Получилось решить проблему?

    t.sergey год назад

    Да, получилась )
    Была задача отправить файл на сервер.
    Спасибо )

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация