push form

نموذج الدفع

مثل form.submit() ، لكن بطريقة ajaxed. خفيف الوزن، حديث، موعود، يستخدم fetch

بدلاً من التسبب في تحميل الصفحة كما يفعل form.submit() ، يمكنك استخدام pushForm(form) لإرسال نموذج عبر fetch . يقرأ تلقائيًا جميع الحقول باستخدام واجهات برمجة التطبيقات الحديثة وينفذ الطلب تمامًا كما هو موضح في سمات 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 : ( ) => { /*  */ } ,
} ) ; 

واجهة برمجة التطبيقات

نموذج الدفع (formElement، requestInit)

إرجاع Promise يتم حله من خلال Response تمامًا كما يفعل fetch .

formElement

النوع: HTMLFormElement

النموذج المراد تقديمه. سيتم استخدام سمات action method لإنشاء طلب HTTP.

requestInit

النوع: object
مثال: {headers: {Accept: 'application/json'}}

يتطابق هذا مع المعلمة الثانية لـ fetch ، ولكن سيتم تجاوز body method بما يحدده عنصر form في سماته.

ajaxifyForm(formElement, options)

يوقف حدث submit النموذج ويستخدم pushForm بدلاً من ذلك. يؤدي هذا إلى إرجاع function يمكنك استدعاؤها لإزالة معالج submit .

formElement

نفس الموجود في pushForm

خيارات

النوع: object

معالجات الإرسال/الخطأ الاختيارية وتكوين عملية fetch .

onSuccess

النوع: function
مثال: (fetchResponse) => {alert('The form was submitted!')}

سيتم استدعاؤه عندما يقوم fetch بتقديم الطلب ويعيد الخادم استجابة ناجحة ( response.ok )

خطأ

النوع: function
مثال: (error) => {alert('Something happened:' + error.message)}

سيتم استدعاؤه عندما يفشل fetch في الطلب أو إذا قام الخادم بإرجاع استجابة خطأ ( response.ok === false )

requestInit

نفس الموجود في pushForm .

متعلق ب

• Select-dom - querySelector خفيف الوزن / All الغلاف الذي يقوم بإخراج مصفوفة.
• doma - تحليل سلسلة HTML إلى DocumentFragment أو Element واحد ببضعة بايت.
• Refined GitHub - يستخدم هذه الوحدة.