как переписать jquery на javascript

Question

$("form").submit(function() { //Change
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php", //Change
            data: th.serialize()
        }).done(function() {
            alert("Thank you!");
            setTimeout(function() {
                // Done Functions
                th.trigger("reset");
            }, 1000);
        });
        return false;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Как сделать тоже самое на js?

Answer 1

Пойдём по порядку:

$("form") - это ничто иное как document.querySelector. Значит пишем document.querySelector('form'). НО! Это вам вернёт первый попавшийся <form>...</form>. Так что если вам надо чтобы все формы при сабмите вызывали одну и ту же ф-ию, то вам надо использовать document.querySelectorAll, который вернёт список всех форм в виде NodeList. Но к счастью у него есть метод forEach, так вам просто надо будет запустить следующие шаги внутри метода forEach
.submit(...) - это тоже самое, что назначить слушатель (ВАЖНО что внутри скобок есть ф-ия иначе это будет вызов события submit). Значит у нас есть 2 возможности:
1. form.addEventListener('submit')
2. form.onsubmit
Про их разницу очень подробно можно прочитать тут и в разных вариациях этот вопрос уже обсуждался 100500 раз, так что думаю найти инфу будет не проблема :). Но если прям очень в кратце, с помощью метода 1 можно задать несколько обработчиков на 1 событие, а с помощью метода 2 только 1 обработчик можно навесить, причём он перетерёт то что было до него. Повторюсь это очень в кратце для общего понимания, лучше прочитайте дополнительно
var th = $(this); - мы так же можем заменить разными способами в зависимости от того в каком виде ф-ия была передана в слушатель:
1. Если была передана ф-ия вида function() {...}, тогда у нас единнственный способ замены это:
  1. const target = this
2. Если была передана ф-ия вида function(e) {...}, тогда у нас два способа замены это:
  1. const target = this
  2. const target = e.target
3. Если была передана ф-ия вида () => {...}, тогда мы не сможем ни на что заменить, т.к. у стрелочной ф-ии нет this и не был передан EventTarget. Но есть небольшая хитрость, если заранее сохранить найденную форму в какую-то переменную, то можно обратиться к ней. В случае с forEach даже отдельно перезаписывать не придётся т.к. нужный элемент уже будет передан в начале методе. Так что если у нас где-то заранее была сохранена форма, то у нас единнственный способ замены это:
  1. const target = form
4. Если была передана ф-ия вида (e) => {...}, тогда у нас единнственный способ замены это:
  1. const target = e.target
Подробнее про всё это можно прочитать тут
th.serialize() - заменям на new FormData(target)

Подробнее можно прочитать тут, тут, тут и тут
$.ajax({TYPE, URL, DATA}) - заменяем на fetch(URL, {method: TYPE, body: new FormData(target)})
.done(...) - заменеяем на .then(res => res.json()).then(...)
th.trigger("reset"); - заменяем на target.reset();
Ну и не забываем return false в конце, чтобы страница не перезагружалась после сабмита формы

БЛОГ НА HUSL

как переписать jquery на javascript

Ответы (1 шт):