push form

แบบฟอร์มการผลักดัน

ชอบ form.submit() แต่ ajaxed น้ำหนักเบา ทันสมัย ​​มีแนวโน้ม ใช้การดึง 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 : ( ) => { /*  */ } ,
} ) ; 

เอพีไอ

pushForm (formElement, คำขอInit)

ส่งคืน Promise ที่แก้ไขด้วย Response เหมือนกับ fetch

แบบฟอร์มองค์ประกอบ

ประเภท: HTMLFormElement

แบบฟอร์มที่จะส่ง แอ็ตทริบิวต์ action และ method จะถูกใช้เพื่อสร้างคำขอ HTTP

คำขอเริ่มต้น

ประเภท: object
ตัวอย่าง: {headers: {Accept: 'application/json'}}

สิ่งนี้ตรงกับพารามิเตอร์ที่สองของ fetch อย่างไรก็ตาม body และ method จะถูกแทนที่ด้วยสิ่งที่องค์ประกอบ form ระบุในแอตทริบิวต์

ajaxifyForm (formElement ตัวเลือก)

หยุดเหตุการณ์ submit แบบฟอร์มและใช้ pushForm แทน สิ่งนี้จะส่งคืน function ที่คุณสามารถเรียกใช้เพื่อลบตัวจัดการ submit

แบบฟอร์มองค์ประกอบ

เช่นเดียวกับที่อยู่ใน pushForm

ตัวเลือก

ประเภท: object

ตัวเลือกการส่ง/ตัวจัดการข้อผิดพลาดและการกำหนดค่าสำหรับ fetch

บนความสำเร็จ

ประเภท: function
ตัวอย่าง: (fetchResponse) => {alert('The form was submitted!')}

มันจะถูกเรียกเมื่อ fetch ทำการร้องขอ และเซิร์ฟเวอร์ส่งคืนการตอบกลับที่สำเร็จ ( response.ok )

บนข้อผิดพลาด

ประเภท: function
ตัวอย่าง: (error) => {alert('Something happened:' + error.message)}

มันจะถูกเรียกเมื่อ fetch ล้มเหลวตามคำขอหรือหากเซิร์ฟเวอร์ส่งคืนการตอบกลับข้อผิดพลาด ( response.ok === false )

คำขอเริ่มต้น

แบบเดียวกับใน pushForm

ที่เกี่ยวข้อง

• select-dom - querySelector แบบน้ำหนักเบา / wrapper All ที่ส่งออกอาร์เรย์
• doma - แยกวิเคราะห์สตริง HTML ลงใน DocumentFragment หรือหนึ่ง Element ในเวลาไม่กี่ไบต์
• GitHub ที่ได้รับการปรับปรุง - ใช้โมดูลนี้