Отправка данных формы используя Fetch API

Fetch API - это современный подход для создания асинхронных запросов. Рассмотрим, как отправить данные формы на сервер, используя Fetch API

Метод fetch() позволяет создавать асинхронные запросы наподобие ajax(). Сравним синтаксис jQuery AJAX и Fetch API на примере отправки данных на сервер.

jQuery AJAX

$.ajax({
    url: 'handlerName.php',
    type: 'POST',
    data: data
}).done(function(data){
    ...
}).fail(function(){
    ...
});

Fetch API

fetch('handlerName.php', {
    method: 'POST',
    body: data
}).then(function(response){
    ...
}).catch(function(error){
    ...
});

Отправка формы с помощью Fetch API

Рассмотрим пример, как можно реализовать отправку данных формы на e-mail

<form>
    <input type="text" name="Имя">
    <input type="tel" name="Телефон">
    <input type="email" name="E-mail">
    <textarea name="Собщение"></textarea>
    <button>Отправить</button>
</form>

Напишем универсальный JavaScript код, чтобы отправка данных на сервер работала для всех форм на сайте

const ajaxSend = (formData) => {
    fetch('mail.php', { // файл-обработчик

        method: 'POST',
        body: formData
    }).then(function(response){
        alert('Сообщение отправлено');
    }).catch(function(error){
        console.error(error);
    })
};

const forms = document.getElementsByTagName('form');
for (let i = 0; i < forms.length; i++) {
    forms[i].addEventListener('submit', function(e){
        e.preventDefault();
        const formData = new FormData(this);
        ajaxSend(formData);
        this.reset(); // очищаем поля формы

    });
};

Обработать данные на сервере вы можете как хотите. Пример mail.php

<?php
$method = $_SERVER['REQUEST_METHOD'];

$c = true;

$project_name = trim($_POST["project_name"]);
$admin_email  = trim($_POST["admin_email"]);
$form_subject = trim($_POST["form_subject"]);

foreach ( $_POST as $key => $value ) {
  if ( is_array($value) ) {
    $value = implode(", ", $value);
  }
  if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
    $message .= "
    " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
      <td style='padding: 10px; border: #e2dddd 1px solid;'><b>$key</b></td>
      <td style='padding: 10px; border: #e2dddd 1px solid;'>$value</td>
    </tr>
    ";
  }
}

$message = "<table style='width: 100%;'>$message</table>";

function adopt($text) {
    return '=?UTF-8?B?'.Base64_encode($text).'?=';
}

$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;

mail($admin_email, adopt($form_subject), $message, $headers );

Используя данный обработчик, необходимо в HTML файле в теге form добавить 3 скрытых input'а :
1. Имя сайта
2. Почту, на которую будут приходить данные
3. Метка, с описанием места отправки формы

<input type="hidden" name="project_name" value="SiteName">
<input type="hidden" name="admin_email"  value="yourMail">
<input type="hidden" name="form_subject" value="Форма с подвала сайта SiteName">

Таким образом можно отправить данные формы на почту, используя Fetch API.

Если вам понравилась статья, то рекомендую к прочтению: Как передать данные из одной формы в другую

21/09/2019 16:45
Николай
21/09/2019 16:45