问题描述
我正在遵循一个教程,并尝试使用MAMP以表单的形式发送信息,因为我需要模拟客户端-服务器的行为,并且它不起作用。我已经从教程中复制了代码,因此代码中应该没有错误,但是仍然无法正常工作。
会发生什么:您在代码中键入的联系信息应发送到服务器。
实际发生的情况:信息被添加到URL。另外,即使我使用了preventDefault
,页面也会刷新。
这是代码:
js:
const forms = document.querySelectorAll('form');
const message = {
loading: 'img/form/spinner.svg',success: 'Спасибо! Скоро мы с вами свяжемся',failure: 'Что-то пошло не так...'
};
forms.forEach(item => {
postData(item);
});
function postData(form) {
form.addEventListener('submit',function (event){
event.preventDefault();
event.stopPropagation();
let statusMessage = document.createElement('img');
statusMessage.src = message.loading;
statusMessage.style.csstext = `
display: block;
margin: 0 auto;
`;
form.insertAdjacentElement('afterend',statusMessage);
const formData = new FormData(form);
const object = {};
formData.forEach(function(value,key){
object[key] = value;
});
fetch('server.PHP',{
method: 'POST',headers: {
'Content-Type': 'application/json'
},body: JSON.stringify(object)
}).then(data => {
console.log(data);
showThanksModal(message.success);
statusMessage.remove();
}).catch(() => {
showThanksModal(message.failure);
}).finally(() => {
form.reset();
});
});
}
function showThanksModal(message) {
const prevModalDialog = document.querySelector('.modal__dialog');
prevModalDialog.classList.add('hide');
openModal();
const thanksModal = document.createElement('div');
thanksModal.classList.add('modal__dialog');
thanksModal.innerHTML = `
<div class="modal__content">
<div class="modal__close" data-close>×</div>
<div class="modal__title">${message}</div>
</div>
`;
document.querySelector('.modal').append(thanksModal);
setTimeout(() => {
thanksModal.remove();
prevModalDialog.classList.add('show');
prevModalDialog.classList.remove('hide');
closeModal();
},4000);
}
PHP:
<?PHP
$_POST = json_decode( file_get_contents("PHP://input"),true );
echo var_dump($_POST);
有人可以告诉我问题出在哪里吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)