push form

push-форма

Как form.submit() , но с использованием ajax. Легкий, современный, многообещающий, использует fetch

Вместо того, чтобы вызывать загрузку страницы, как это делает form.submit() , вы можете использовать pushForm(form) для отправки формы через fetch . Он автоматически считывает все поля с помощью современных API и выполняет запрос точно так, как описано в атрибутах form .

Установить

 npm install push-form

 // This module is only offered as a ES Module
import pushForm from 'push-form' ; 

Использование

Учитывая обычный элемент формы:

 < form action =" submissions.php " type =" post " >
	First name < input name =" firstname " required /> < br />
	Last name < input name =" lastname " required /> < br />
	Passport < input name =" passport " type =" file " required />
	< button > Submit </ button >
</ form >

Вы можете опубликовать его через fetch с помощью:

 import pushForm from 'push-form' ;

const form = document . querySelector ( 'form' ) ;
form . addEventListener ( 'submit' , async event => {
	event . preventDefault ( ) ;
	const response = await pushForm ( ) ;
	if ( response . ok ) {
		alert ( 'Thanks for your submission!' ) ;
	}
} ) ;

Или используйте ajaxifyForm , чтобы он автоматически обрабатывал отправку пользователя:

 import { ajaxifyForm } from 'push-form' ;

const form = document . querySelector ( 'form' ) ;
ajaxifyForm ( form , {
	onSuccess : ( ) => { /* ✅ */ } ,
	onError : ( ) => { /*  */ } ,
} ) ; 

API

pushForm (formElement, requestInit)

Возвращает Promise , которое разрешается с помощью Response точно так же, как это делает fetch .

formElement

Тип: HTMLFormElement

Форма для отправки. Его атрибуты action и method будут использоваться для создания HTTP-запроса.

запросинит

Тип: object
Пример: {headers: {Accept: 'application/json'}}

Это соответствует второму параметру fetch , однако body и method будут переопределены тем, что элемент form указывает в своих атрибутах.

ajaxifyForm (formElement, параметры)

Останавливает событие submit формы и вместо этого использует pushForm . Это возвращает function , которую вы можете вызвать, чтобы удалить обработчик submit .

formElement

То же, что и в pushForm

параметры

Тип: object

Дополнительные обработчики отправки/ошибок и конфигурация для fetch .

onSuccess

Тип: function
Пример: (fetchResponse) => {alert('The form was submitted!')}

Он будет вызван, когда fetch выполнит запрос и сервер вернет успешный ответ ( response.ok ).

onError

Тип: function
Пример: (error) => {alert('Something happened:' + error.message)}

Он будет вызван, когда fetch не выполнит запрос или если сервер вернет ответ с ошибкой ( response.ok === false )

запросинит

То же, что и в pushForm .

Связанный

• select-dom — облегченная оболочка querySelector / All , которая выводит массив.
• doma — анализирует HTML-строку в DocumentFragment или один Element в несколько байтов.
• Усовершенствованный GitHub — использует этот модуль.