Данные почтовой формы с Fetch API - PullRequest
Новая
       33

Данные почтовой формы с Fetch API

0 голосов
/ 28 апреля 2018

Я пытаюсь использовать Fetch API для извлечения данных из формы и отправки по почте, но полученное сообщение электронной почты пустое. Ответ кажется успешным, но данные не отправляются. Что я делаю не так?

Это мой код JS и мой фрагмент php / html, если он уместен 

(function() {

  const submitBtn = document.querySelector('#submit');

  submitBtn.addEventListener('click', postData);

  function postData(e) {
    e.preventDefault();

    const first_name = document.querySelector('#name').value;
    const email = document.querySelector('#email').value;
    const message = document.querySelector('#msg').value;

    fetch('process.php', {
        method: 'POST',
        body: JSON.stringify({first_name:first_name, email:email, message:message})
    }).then(function (response) {
      console.log(response);
      return response.json();
    }).then(function(data) {
      console.log(data);
      // Success
    });

  }

})();



<!-- begin snippet: js hide: false console: true babel: false -->
<?php 
    $to = "example@mail.com"; 
    $first_name = $_POST['first_name'];
    $from = $_POST['email']; 
    $message = $_POST['message'];
    $subject = "Test Email";
    $message = $first_name . " sent a message:" . "\n\n" . $message;
    $headers = "From:" . $from;
    mail($to,$subject,$message,$headers);
?>


<form action="" method="post" class="contact__form form" id="contact-form">
  <input type="text" class="form__input" placeholder="Your Name" id="name" name="first_name" required="">
  <input type="email" class="form__input" placeholder="Email address" id="email" name="email" required="">
  <textarea id="msg" placeholder="Message" class="form__textarea" name="message"/></textarea>
  <input class="btn" type="submit" name="submit" value="Send" id="submit"/>
</form>

1 Ответ

0 голосов
/ 28 апреля 2018

PHP не понимает тела запросов JSON. Поэтому, когда ему отправляется текст JSON, PHP не будет автоматически анализировать JSON и помещать данные в глобальную переменную $ _POST.

Также fetch() будет использовать MIME-текст по умолчанию / обычный для типа содержимого, когда тело является просто текстом. Таким образом, даже если вы установите body для данных, скажем, в формате x-www-form-urlencoded, он не установит правильный заголовок запроса, а PHP не сможет его правильно проанализировать.

Вам либо нужно вручную получить отправленные данные и проанализировать их самостоятельно: 

<?php

$dataString = file_get_contents('php://input');
$data = json_decode($dataString);
echo $data->first_name;

Отправка данных в виде другого типа содержимого, например application/x-www-form-urlencoded, путем явной установки заголовка типа содержимого и передачи правильного форматированного body: 

fetch('/', {
  method: 'POST',
  headers:{
    "content-type":"application/x-www-form-urlencoded"
  },
  body: "first_name=name&email=email@example.com"
})

Или даже создать объект FormData и позволить fetch автоматически определять правильный тип содержимого для использования: 

var data = new FormData();
data.append('first_name','name');
data.append('email','email@example.com');

fetch('/', {
  method: 'POST',
  body: data
})
...