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

177

24 марта 2019, 16:00

Есть типовой скрипт отправки писем на 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 = "mail@yandex.ru";
$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?

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

Answer 1

Мы с Вами уже обсуждали использование 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>

Answer 2

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

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>