ajax form
1.0.0
แบบฟอร์ม HTML เกี่ยวกับยาเพิ่มประสิทธิภาพ
หมายเหตุ: รูปแบบ Ajax ไม่ได้เชื่อมโยงกับโพลีเมอร์ จริงๆ แล้ว มันไม่มีการพึ่งพาใดๆ เลย แต่ควรจะทำงานได้ดีกับ Polymer หรือไลบรารีองค์ประกอบที่กำหนดเองอื่นๆ หากคุณต้องการใช้โพลีฟิลองค์ประกอบที่กำหนดเองแบบเรียบง่าย รูปแบบ ajax ก็เป็นตัวเลือกที่ดีที่สุดของคุณเช่นกัน
<form> แบบดั้งเดิม?การส่งแบบฟอร์มเปลี่ยนแปลง/โหลดหน้าซ้ำ และการป้องกันอย่างถูกต้องไม่ใช่เรื่องเล็กน้อย
คุณไม่สามารถส่งส่วนหัวที่กำหนดเองด้วยแบบฟอร์มที่ส่งมาได้
คุณไม่สามารถ (อย่างง่ายดาย) แยกวิเคราะห์การตอบสนองของเซิร์ฟเวอร์หลังจากส่งแบบฟอร์มแล้ว
การติดตามแบบฟอร์ม/ฟิลด์ที่ไม่ถูกต้องโดยทางโปรแกรมนั้นน่าหงุดหงิด
คุณไม่สามารถส่งข้อมูลแบบฟอร์มเป็น JSON
คุณไม่มีโอกาสที่จะเพิ่มข้อมูลที่ผู้ใช้ป้อนโดยทางโปรแกรมก่อนที่จะถูกส่งไปยังเซิร์ฟเวอร์
องค์ประกอบแบบฟอร์มที่กำหนดเอง (เช่น องค์ประกอบที่สร้างขึ้นโดยใช้ข้อกำหนดส่วนประกอบของเว็บ) ไม่สามารถส่งโดยใช้ <form> แบบดั้งเดิมที่บริสุทธิ์
องค์ประกอบที่กำหนดเองใน ajax-form เสริม <form> แบบดั้งเดิมเพื่อให้มีคุณสมบัติเพิ่มเติมและแก้ไขปัญหาที่ระบุไว้ข้างต้น ดูหน้าเอกสารประกอบ API สำหรับเอกสารและการสาธิตฉบับสมบูรณ์
npm install ajax-form
ใช้ ajax-form เช่นเดียวกับที่คุณใช้รูปแบบดั้งเดิม ยกเว้นแอตทริบิวต์ is="ajax-form" จำเป็นซึ่งคุณ ต้อง รวมไว้ในมาร์กอัปองค์ประกอบ <form> ของคุณ เนื่องจาก ajax-form เป็นองค์ประกอบของเว็บ คุณจึงอาจจำเป็นต้องรวม polyfill ขององค์ประกอบเว็บ เช่น webcomponents.js เพื่อให้แน่ใจว่าเบราว์เซอร์ที่ไม่ได้ใช้ข้อกำหนด WC จะสามารถใช้รูปแบบ ajax ได้ แบบฟอร์ม Ajax ไม่มี การพึ่งพาอย่างหนัก
การใช้ ajax-form ที่เรียบง่ายนั้นดูเหมือน <form> ปกติ โดยมีการเพิ่มแอตทริบิวต์ is :
<form is="ajax-form" action="my/form/handler" method="post"><label>ป้อนชื่อของคุณ: <input type="text" name="full_name"></label>.. .</รูปแบบ>
ดูหน้าเอกสารประกอบ API สำหรับเอกสารและการสาธิตฉบับสมบูรณ์
คุณกำลังพัฒนาส่วนประกอบเว็บฟิลด์ฟอร์มหรือไม่? อ่านคำแนะนำด้านล่างเพื่อให้แน่ใจว่าฟิลด์ของคุณบูรณาการอย่างถูกต้องกับรูปแบบ ajax
ส่วนประกอบของคุณจะรวมเข้ากับรูปแบบ Ajax อย่างดี หากองค์ประกอบที่กำหนดเองของคุณเปิดเผยคุณสมบัติ value ที่มีค่าปัจจุบันของฟิลด์ หากสิ่งนี้ไม่เป็นความจริง ฟิลด์ที่กำหนดเองของคุณจะต้องตรวจสอบให้แน่ใจว่าฟิลด์ฟอร์ม HTML ดั้งเดิมเป็นส่วนหนึ่งของ Light DOM ไม่ว่าในกรณีใด องค์ประกอบที่มีคุณสมบัติ value จะต้องมีแอตทริบิวต์ name ด้วย ผู้ใช้/ผู้รวมระบบของคุณจะต้องระบุค่าที่เหมาะสมสำหรับฟิลด์นี้
หากฟิลด์ที่กำหนดเองของคุณแสดงฟิลด์ฟอร์ม HTML ดั้งเดิมใน light DOM ก็ไม่ต้องทำอะไรอีกแล้ว - ajax-form จะเคารพการตรวจสอบใด ๆ ที่ผู้ใช้/ผู้รวมระบบของคุณเพิ่มลงในฟิลด์ ต้องวางแอตทริบิวต์ข้อจำกัดลงในฟิลด์ฟอร์ม HTML ดั้งเดิม
หากฟิลด์ที่กำหนดเองของคุณไม่เปิดเผยฟิลด์ฟอร์ม HTML ดั้งเดิมใน light DOM ตามค่าเริ่มต้น และคุณต้องการให้ฟอร์ม ajax เป็นไปตามข้อจำกัดในการตรวจสอบ คุณจะต้องใส่โค้ดเล็กน้อยเพื่อคำนึงถึงเรื่องนี้ นี่คือขั้นตอนในการปฏิบัติตาม:
เพิ่มฟิลด์ทึบแสง 0x0 <input type="text"> ลงใน light DOM ก่อนฟิลด์ของคุณ
เพิ่มคุณสมบัติ customElementRef ให้กับอินพุต โดยมีค่าเท่ากับฟิลด์ของคุณ
ตรวจสอบให้แน่ใจว่าความถูกต้องของอินพุตตรงกับความถูกต้องของฟิลด์ของคุณเสมอ คุณสามารถทำได้โดยใช้เมธอด setCustomValidity ที่มีอยู่ใน HTMLInputElement
ดูตัวอย่างเมธอด setValidationTarget ในซอร์สโค้ดองค์ประกอบที่กำหนดเอง <file-input>
npm install npm install -g grunt-cli grunt
การรัน grunt โดยไม่มีพารามิเตอร์ใด ๆ จะทดสอบกับเบราว์เซอร์ที่ติดตั้งในเครื่องบางตัว (ดูรายละเอียดที่ codebase)
การเรียกใช้ grunt shell:wctSauce จะทำการทดสอบกับเบราว์เซอร์จำนวนหนึ่งใน SauceLabs ตรวจสอบให้แน่ใจว่าคุณได้แนบชื่อผู้ใช้และรหัส SauceLabs เข้ากับตัวแปรสภาพแวดล้อมที่เหมาะสมก่อน
