Получение данных: Построение форм | Next.js
Веб-форма имеет отношение клиент-сервер . Они используются для отправки данных, обрабатываемых веб-сервером, для обработки и хранения. Сама форма является клиентом, а сервер — любым механизмом хранения, который можно использовать для хранения, извлечения и отправки данных при необходимости.
Это руководство научит вас создавать веб-формы с помощью Next.js.
HTML-формы создаются с использованием тега
Внешний вид выглядит следующим образом:
Тег HTML
При отключенном JavaScript, когда вы нажимаете кнопку «Отправить», запускается событие, которое собирает данные формы и отправляет их в конечную точку нашего API форм, как определено в атрибуте action и с использованием метода POST HTTP .
Вы будете перенаправлены на конечную точку /api/form , так как именно так работает форма action .
Данные формы будут отправлены на сервер в виде запроса req к функции обработчика формы, написанной выше. Он обработает данные и вернет строку JSON в качестве ответа res с включенным вашим именем.
Чтобы улучшить работу здесь, в качестве ответа вы можете перенаправить пользователя на страницу и поблагодарить его за отправку формы.
Внутри /pages вы создадите еще один файл с именем js-form.js . Это создаст страницу /js-form в вашем приложении Next.js.
Теперь, как только форма будет отправлена, мы предотвратим перезагрузку страницы по умолчанию. Мы возьмем данные формы, преобразуем их в строку JSON и отправим на наш сервер, конечную точку API. Наконец, наш сервер ответит отправленным именем. Все это с базовым JavaScript функция handleSubmit() .
Вот как выглядит эта функция. Это хорошо задокументировано для понимания каждого шага:
функция экспорта по умолчанию PageWithJSbasedForm() {
// Обрабатывает событие отправки при отправке формы.
const handleSubmit = async (событие) => {
// Остановить отправку формы и обновить страницу.
событие.preventDefault()
// Получить данные из формы.
постоянные данные = {
сначала: event.target.first.value,
последнее: событие.цель.последнее.значение,
}
// Отправляем данные на сервер в формате JSON.
const JSONdata = JSON.stringify(данные)
// Конечная точка API, куда мы отправляем данные формы.
константная конечная точка = '/api/form'
// Формируем запрос на отправку данных на сервер.
постоянные параметры = {
// Метод POST, потому что мы отправляем данные.
метод: «ПОСТ»,
// Сообщаем серверу, что мы отправляем JSON.
заголовки: {
«Тип контента»: «приложение/json»,
},
// Тело запроса — это данные JSON, которые мы создали выше.
тело: JSONданные,
}
// Отправьте данные формы в наш API форм на Vercel и получите ответ.
константный ответ = ожидание выборки (конечная точка, параметры)
// Получить данные ответа с сервера в формате JSON.
// Если сервер возвращает отправленное имя, это означает, что форма работает.
константный результат = ожидание ответа.json()
alert(`Это ваше полное имя: ${result.data}`)
}
возвращаться (
// Мы передаем событие в функцию handleSubmit() при отправке.
<форма onSubmit={handleSubmit}>
)
} 
тело: JSONданные,
}
// Отправьте данные формы в наш API форм на Vercel и получите ответ.
константный ответ = ожидание выборки (конечная точка, параметры)
// Получить данные ответа с сервера в формате JSON.
// Если сервер возвращает отправленное имя, это означает, что форма работает.
константный результат = ожидание ответа.json()
alert(`Это ваше полное имя: ${result.data}`)
}
возвращаться (
// Мы передаем событие в функцию handleSubmit() при отправке.
<форма onSubmit={handleSubmit}>
)
} Это страница Next.js с компонентом функции React под названием PageWithJSbasedForm с элементом , написанным на JSX. Нет никаких действий с элементом .
Вместо этого мы используем обработчик события onSubmit для отправки данных в нашу функцию {handleSubmit} .
Функция handleSubmit() обрабатывает данные формы в несколько этапов:
event.preventDefault()запрещает элементуМы создали объект JavaScript с именемdataспервымиипоследнимизначениями из формы.JSON — это формат передачи данных, не зависящий от языка. Поэтому мы используемJSON.stringify(data)для преобразования данных в JSON.Затем мы используемfetch()для отправки данных на нашу конечную точку/api/formс использованием JSON и HTTPPOST 9Метод 0010.Сервер возвращает ответ с отправленным именем. Ууууу! 🥳
В этом руководстве рассмотрено следующее:
Базовая форма HTMLПонимание форм с React. jsПроверка данных форм с помощью JavaScript и без негоИспользование маршрутов API Next.js для обработкиreqиresот клиента и сервера
js Для получения более подробной информации пройдите обучающий курс Next.js.
Создание формы | RedwoodJS Docs
Создание формы | RedwoodJS Docs Подождите, не закрывайте браузер! Вы должны были знать, что в конце концов это произойдет, не так ли? И вы, вероятно, уже поняли, что у нас даже не было бы этого раздела в учебнике, если бы Редвуд не придумал способ сделать формы менее высасывающими душу, чем обычно. На самом деле, Редвуд может даже заставить вас полюбить строительных форм.
Ну, любовь - это сильно сказано. Понравились строительные формы ?
Терпеть их строить?
В нашем приложении уже есть одна или две формы; помните наши посты эшафот? И они работают очень хорошо! Как трудно это может быть? (Надеюсь, вы еще не видели этот код — то, что будет дальше, будет гораздо более впечатляющим, если вы этого не сделали. )
Давайте создадим самую простую форму, которая все еще имеет смысл для нашего блога, форму «Свяжитесь с нами».
The Page
пряжа rw g page contact
Мы можем разместить ссылку на Contact в заголовке нашего макета:
- JavaScript
- TypeScript
web/src/layouts/BlogLayout/BlogLayout.js
import { Link, route } from '@redwoodjs/router' const BlogLayout = ({ children }) => { 9 0457 возврат (
<>
Блог Redwood
{children}
)
} экспорт по умолчанию BlogLayout
Затем используйте BlogLayout для ContactPage , убедившись, что он обернут тем же , как и другие страницы в файле маршрутов:
- JavaScript
- TypeScript
web/src/Routes. js
import { Router, Route, Set } from '@redwoodjs/router'
import ScaffoldLayout из 'src /layouts/ScaffoldLayout'
импортировать BlogLayout из 'src/layouts/BlogLayout' const Routes = () => {
return (
)
}
export default Routes
Дважды проверьте, что все выглядит хорошо, а затем давайте перейдем к хорошему.
Знакомство с помощниками по формам
Работа с формами в React печально известна своей раздражительностью. Существуют контролируемые компоненты и неконтролируемые компоненты, сторонние библиотеки и множество других обходных путей, чтобы попытаться сделать формы в React такими же простыми, какими они изначально задумывались в спецификации HTML:0009 Поле с атрибутом имени , который куда-то отправляется при нажатии кнопки.
Мы думаем, что Redwood — это шаг или два в правильном направлении, поскольку он не только освобождает вас от написания управляемой схемы компонентов, но и автоматически справляется с проверкой и устранением ошибок. Давайте посмотрим, как это работает.
Мы не будем извлекать данные из базы данных на нашей странице контактов, поэтому мы не будем создавать ячейку. Давайте создадим форму прямо на странице. Формы красного дерева начинаются с... подождите... tag:
- JavaScript
- TypeScript
web/src/pages/ContactPage/ContactPage. js
import { MetaTags } from '@redwoodjs/web'
импортировать {форму} из '@redwoodjs /forms' const ContactPage = () => {
return (
<>
)
}
экспорт по умолчанию ContactPage
Что ж, это было разочаровывающе. Его даже в браузере не видно. Давайте добавим поле формы, чтобы хоть что-то видеть. Redwood поставляется с несколькими входными данными, а поле ввода простого текста — . Мы также дадим полю атрибут name , чтобы, когда на этой странице будет несколько входных данных, мы знали, какие данные содержат: .js
import {MetaTags} from '@redwoodjs/web'
import {Form, TextField} from '@redwoodjs/forms' const ContactPage = () => {
return (
<>
Что-то есть показ! Тем не менее, довольно скучно. Как насчет добавления кнопки отправки?
- JavaScript
- TypeScript
web/src/pages/ContactPage/ContactPage.js
import {MetaTags} from '@redwoodjs/web'
import {Form, TextField, Submit} из '@redwoodjs/forms' const ContactPage = () => {
return (
<>
<Форма>
Сохранить
)
}
export default ContactPage
У нас есть то, что можно было бы считать настоящей, добросовестной формой. Попробуйте ввести что-нибудь и нажать «Сохранить». Ничего не взорвалось на странице, но у нас нет указаний на то, что форма была отправлена или что случилось с данными. Далее мы получим данные из наших полей.
onSubmit
Подобно простой форме HTML, мы дадим
)
js
js
Как насчет добавления кнопки отправки?