Javascript: проблемы с запросом POST через Fetch
Я пытаюсь опубликовать (как в типе запроса POST) некоторые данные JSON на задней странице PHP с помощью Fetch, но по какой-то причине страница PHP читает POST как пустую.
Разметка формы
<form action = "add_to_mailchimp.php" method = "POST">
<input type = "text" name = "email" placeholder = "Enter your email" />
<button type = "submit">Go</button>
</form>
Javascript:
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const payload = {
// email: document.querySelector('[name = "email"]').value,
email: '[email protected]', // hard code value just for example
};
console.info('about to submit %o', payload);
fetch('add_to_mailchimp.php', {
method: 'POST',
body: JSON.stringify(payload),
headers: {
'Content-Type': 'application/json',
},
})
.then((response) => {
console.info(response);
return response.json();
})
.then((data) => {
console.info(data);
})
.catch((error) => {
console.info(error);
});
});
});
PHP
<?php
print json_encode(array('postObj' => $_POST, 'reqType' => $_SERVER['REQUEST_METHOD'));
die;
?>
При отправке формы в консоль пишется следующее.
{postObj: [], reqType: "POST", [[Prototype]]: Object}
Когда я удаляю javascript и разрешаю отправку формы в обычном режиме и добавляю в PHP следующее:
print '<pre>';
print_r($_POST);
print '</pre>';
Я получил:
Array
(
[email] => [email protected]
)
Где [email protected] — любое значение, введенное в текстовое поле. Я бился головой о стену, пытаясь понять это в течение последнего часа, и у меня официально нет идей. Может ли кто-нибудь пролить свет на это для меня? Спасибо!
@Jared - полезная нагрузка запроса показывает правильные значения ({email: "[email protected]"}), а ответ показывает то же самое, что и то, что отображается в консоли.
Ваш PHP недействителен - отсутствует закрывающий ] после REQUEST_METHOD
Отвечает ли это на ваш вопрос? Получите JSON POST с PHP
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Измените свой PHP на код ниже:
$json = file_get_contents('php://input');
print_r($json);
Это позволяет вам читать необработанные данные из тела запроса.
Одна страница, рабочая демонстрация, чтобы проиллюстрировать, как вы можете достичь поставленных целей. Использование, как уже указывалось, file_get_contents('php://input') правильно, поскольку вы больше не отправляете обычный запрос типа www-urlencoded или form-data, поскольку вы указываете Content-Type как json
Также добавлен небольшой фрагмент кода для очистки элемента ввода в фокусе и восстановления, если пользователю не удалось добавить собственный адрес электронной почты - очень элементарно, хотя и с регулярным выражением для проверки того, что любое введенное значение является более или менее правильным как электронная почта адрес. Дальнейшие проверки на стороне сервера должны выполняться с помощью filter_input или аналогичного, чтобы убедиться, что электронная почта действительно действительна при получении на сервере.
<?php
if ( $_SERVER['REQUEST_METHOD']=='POST' ){
$json=json_encode(
array(
'postObj' => file_get_contents('php://input'),
'reqType' => $_SERVER['REQUEST_METHOD']
)
);
exit( $json );
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Mailchimp</title>
</head>
<body>
<form name='mailchimp' action='add_to_mailchimp.php' method='POST'>
<input type='text' name='email' placeholder='Enter your email' value='[email protected]' />
<button type='submit'>Go</button>
</form>
<script>
const b=false; // set as true to change url used by Fetch
const d=document;
const f=d.forms.mailchimp;
const pttn=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
d.addEventListener('DOMContentLoaded', () => {
// clear default value on focus
f.email.addEventListener('focus',e=>{
e.target.value='';
});
// restore default value if left empty
f.email.addEventListener('blur',e=>{
if ( !e.target.value.match( pttn ))alert('Invalid email address');
if ( e.target.value=='' )e.target.value=e.target.defaultValue;
});
// send ajax request
f.addEventListener('submit', e=>{
e.preventDefault();
if ( !f.email.value.match( pttn ) ) return
const payload = {
email:f.email.value
};
const args = {
method:'POST',
mode:'cors',
body:JSON.stringify( payload ),
headers:{
'Content-Type':'application/json',
}
};
const callback=(r)=>{
console.info( r );
};
// Change the variable above to true to use Form Action as target url
let url=b ? f.action : location.href;
fetch( url, args )
.then(r=>r.json())
.then(callback)
.catch(console.info)
});
});
</script>
</body>
</html>
Вы можете посмотреть реальную полезную нагрузку, отправляемую в инструментах разработчика браузера, вкладка сети. Что там?