Как может выглядеть Ajax отправка формы без jQuery?

Question

[Mesuti]

Привет!
Есть типовой скрипт отправки писем на jQuery

$(document).ready(function() {
            
            // Берем все формы со страницы
            $("form").submit(function() {
                var th = $(this);
                $.ajax({
                    type: "POST",
                    url: "mail.php",
                    data: th.serialize()
                }).done(function() {
                    
                    // Если все успешно
                    alert("Thank you!");
                });
                return false;
            });
        });

Чтобы не быть привязанным к версии или наличию библиотеки jQuery, как можно написать такой же Ajax на чистом JavaScript?
С возможностью оповещения об успешной отправке письма.

Answer 1

[Stalker_RED]

let form = document.querySelector('form')
form.addEventListener('submit', submitHandler)
function submitHandler(){
  fetch("mail.php", {
    method: "POST",
    body: new FormData(form)
  })
  .then(response => response.json())
  .then(function(json) { /* process your JSON further */ })
  .catch(function(error) { console.log(error); });
})

Отсюда: https://developer.mozilla.org/ru/docs/Web/API/Fetc...

Comments

[Mesuti]

Почему-то страница перезагружается.
Хотя вроде все стандартно:

html

<form action="">
    <input type="text" name="name">
    <button type="submit">отправить</button>
</form>

<script>
    let form = document.querySelector('form')
    form.addEventListener('submit', submitHandler)
    function submitHandler(){
        fetch("mail.php", {
            method: "POST",
            body: new FormData(form)
        })
            .then(response => response.json())
            .then(function(json) { /* process your JSON further */ })
            .catch(function(error) { console.log(error); });
    }
</script>

php

<?php

$recepient = "[e-mail]";
$sitename = "Название сайта";

$name = trim($_POST["name"]);
$message = "Имя: $name;

$pagetitle = "Новая заявка с сайта \"$sitename\"";
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");

[Stalker_RED]

Ulgran Helmi, preventDefault надо добавить
в jquery выместо этого return false;

[Mesuti]

Stalker_RED, не работает все равно(

let form = document.querySelector('form')
    form.addEventListener('submit', submitHandler)
    function submitHandler(){
        fetch("mail.php", {
            method: "POST",
            body: new FormData(form)
        })
            .then(response => response.json())
            .then(function(json) { /* process your JSON further */ })
            .catch(function(error) { console.log(error);
            });
        preventDefault;
    }

[Stalker_RED]

Ulgran Helmi, то есть вы даже не попытались узнать что за штука такая "preventDefault" и как ее готовить?
Ну удачи вам, чо.

[Mesuti]

Stalker_RED, Извиняюсь, что отнял у Вас время.

[Сергей Горностаев]

Ulgran Helmi,

function submitHandler(event) {
    event.preventDefault();
    ...
}

[Stalker_RED]

Ulgran Helmi, не обижайтесь. ответ с preventDefault я писал с телефона, а редактировать код на телефоне - удовольствие ниже среднего.
Есть такая поговорка: если у вас что-то не получается - попробуйте прочесть инструкцию.