Методы отправки форм в JavaScript

Формы могут быть отправлены двумя способами: методом GET или методом POST. Способ отправки формы регулируется атрибутом method формы.

Например, укажем для формы метод отправки GET:

public/form.html<form action="/handler/" method="GET">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

А теперь метод POST:

public/form.html<form action="/handler/" method="POST">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

Давайте теперь посмотрим, в чем разница между двумя методами отправки. В случае метода GET данные формы будут видны в браузере в виде так называемой строки параметров (query string), представляющей собой пары вида ключ-значение, где ключом будет имя элемента формы, а значением - введенные в него данные. При этом пары значений будут разделены амперсандами.

Данные, отправленные методом GET, попадут на нашем сервере в свойство get объекта с данными:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.get); // выведется в консоль сервера
    return 'form data received';
  }
}

А данные, отправленные методом POST, попадут на нашем сервере в свойство post объекта с данными:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.post); // выведется в консоль сервера
    return 'form data received';
  }
}

Для краткости можно выполнить деструктуризацию, чтобы получить наши данные в отдельную переменную:

server.jsexport default {
  '/handler/': function({get, post}) {
    console.log(get);
    console.log(post);
    return 'form data received';
  }
}