Формы могут быть отправлены двумя способами:
методом GET или методом POST. Способ отправки
формы регулируется атрибутом method формы.
По умолчанию метод отправки будет GET. Давайте, однако, укажем его в явном виде в нашей форме:
<form action="/handler/" method="GET">
<input name="test1">
<input name="test2">
<input type="submit">
</form>
Давайте теперь посмотрим, в чем разница между двумя методами отправки. В случае метода GET данные формы будут видны в браузере в виде так называемой строки параметров (query string), представляющей собой пары вида ключ=значение, где ключом будет имя элемента формы, а значением - введенные в него данные. При этом пары значений будут разделены амперсандами.
Данные, отправленные методом GET попадут
на нашем сервере в свойство get объекта
с данными:
export default {
'/handler/': function(data) {
console.log(data.get); // выведется в консоль сервера
return 'form data received';
}
}
Для краткости можно выполнить деструктуризацию, чтобы получить наши данные в отдельную переменную:
export default {
'/handler/': function({get}) {
console.log(get); // выведется в консоль сервера
return 'form data received';
}
}
Пример
Давайте проверим работу описанного на каком-нибудь примере. Пусть у нас есть форма, в инпуты которой вводятся числа:
<form action="/handler/" method="GET">
<input name="num1">
<input name="num2">
<input type="submit">
</form>
Пусть сервер найдет сумму полученных чисел от отправит результат обратно в браузер. Для начала получим отправленные числа:
export default {
'/handler/': function({get}) {
console.log(get.num1);
console.log(get.num2);
return 'form data received';
}
}
Найдем теперь их сумму и отправим обратно в браузер:
export default {
'/handler/': function({get}) {
return Number(get.num1) + Number(get.num2);
}
}
Сделайте форму с пятью инпутами, в которые вводятся числа. Пусть сервер вычислит среднее арифметическое переданных чисел и отправит результат обратно в браузер.
Спросите у пользователя его имя, фамилию и отчество. Отправьте данные на сервер. Пусть сервер в качестве ответа возвращает сообщение об успешной отправке.
Спросите у пользователя дату в формате год-месяц-день. Отправьте дату на сервер. Пусть сервер проверит корректность формата даты. Если дата корректна - пусть он вернет сообщение об успехе, а если некорректна - сообщение о неудаче.