2

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

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

Ajax+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;
            });
        });

PHP:

<?php

$recepient = "[email protected]";
$sitename = "Название сайта";

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

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

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

С возможностью оповещения об успешной отправке письма и который берет все формы со страницы

2 ответа 2

3

Мы с Вами уже обсуждали использование FormData. Здесь для этого как раз подходящий случай.

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

  var request = new XMLHttpRequest();
  request.onreadystatechange = function() { 
    console.log("readyState=", this.readyState, "statis=", this.status);
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // success, show this.responseText here
        console.log("SUCCESS", this);
    }
  }
  
  request.open(this.method, this.action, true);
  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  
  var data = new FormData(this);
  for (var key of data.keys())
    console.log(key, data.get(key));
    
  request.send(data);
}

document.querySelectorAll("form").forEach(form =>
  form.addEventListener("submit", submitHandler)
);
<form action="/mail1.php" method="POST">
    <input type="text" name="name" value="a">
    <input type="text" name="city" value="b">
    <button type="submit">отправить</button>
</form>

<br>

<form action="/mail2.php" method="POST">
    <input type="text" name="name" value="c">
    <input type="text" name="city" value="d">
    <button type="submit">отправить</button>
</form>

7
  • @Mesuti Когда происходит обычный сабмит формы, данные приходят на сервер?
    – user176262
    2 ноя 2018 в 19:18
  • @Mesuti Скорее всего дело в том, что в Вашем тэге form нет атрибутов method и action. Добавьте их. Или, если они все одинаковые, напишите их прямо в request.open("POST", "/mail.php", true);
    – user176262
    2 ноя 2018 в 19:28
  • Потестировал другие Ajax, данные приходят. Сейчас разбираюсь, почему такое может случаться...
    – VanilJS
    2 ноя 2018 в 19:31
  • @Mesuti в консоли данные появляются, как в ответе?
    – user176262
    2 ноя 2018 в 19:32
  • @Mesuti Пока не вижу, в чем дело. Код принципиально не отличается от developer.mozilla.org/en-US/docs/Web/API/FormData/…
    – user176262
    2 ноя 2018 в 19:45
1

Несколько полей для примера как их передавать в тело запроса:

var forms = document.querySelectorAll("form");

function submit() {
  var request = new XMLHttpRequest();
  request.onload = function () {
    if (request.status == 200) {
      alert("Thank you!")
    }
  };
  request.open(this.method, this.action, true);
  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  var name = this.querySelector('[name="name"]');
  var city = this.querySelector('[name="city"]');
  request.send('name=' + encodeURIComponent(name.value) + '&city='  + encodeURIComponent(city.value));
  return false;
}

for (var i = 0; i < forms.length; i++) {
  forms[i].onsubmit = submit;
}
<form action="/mail.php" method="POST">
    <input type="text" name="name">
    <input type="text" name="city">
    <button type="submit">отправить</button>
</form>

6
  • Спасибо большое за участие. однако, страница перезагружается. пытаюсь понять почему.
    – VanilJS
    2 ноя 2018 в 18:27
  • Потому что функция submit() не прерывает процесс отправки формы. Обратите внимание на e.preventDefault(); в моем ответе.
    – user176262
    2 ноя 2018 в 18:33
  • @Mesuti да, пропустил return false 2 ноя 2018 в 18:33
  • @НикитаУмнов Вы для новых полей будете новые строчки в submit() добавлять? А для файлов? А если у разных форм - разные поля?
    – user176262
    2 ноя 2018 в 18:51
  • @Igor действительно, если будут новые поля, то придется править
    – VanilJS
    2 ноя 2018 в 19:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.