กี่ครั้งแล้วที่คุณพบว่าคุณป้อนข้อมูลไม่ถูกต้อง เนื่องจากหน้าเว็บโหลดใหม่และลบอักขระที่ป้อนในฟิลด์ออกทั้งหมด ในการแก้ไขปัญหานี้ มีวิธีการที่ได้รับความนิยมพอสมควรในการสร้างส่วนต่อประสานกับผู้ใช้ และชื่อของมันคืออาแจ็กซ์ ปรากฎในหลายโครงการและนำไปใช้ได้หลายอย่าง
ส่งแบบฟอร์มอาแจ็กซ์: เชื่อมต่อห้องสมุด
รวมไลบรารี jquery ใน index.php.
มีวิธีอื่นในการรวม jquery ในเอกสาร คุณต้องดาวน์โหลดไลบรารี่จากเว็บไซต์ทางการของ jquery วางลงในโฟลเดอร์ที่ถูกต้องแล้ววางลิงก์ในลักษณะนี้:
การเชื่อมต่อและตั้งค่าเอกสาร
1. สร้างเอกสาร.php ในโฟลเดอร์ที่มีชื่อไซต์ที่สะดวกสำหรับคุณ ซึ่งจะเป็นการส่งแบบฟอร์ม ajax php ในนั้นคุณสามารถเขียนข้อความที่มีข้อความในรูปแบบใด ตัวอย่างเช่น form1.php.
โฟลเดอร์เว็บไซต์ 2. ในโฟลเดอร์ไฟล์จาวาสคริปต์ ให้สร้างไฟล์.js ด้วยชื่อที่สะดวก ตัวอย่างเช่น form.js.
โฟลเดอร์ js 3. เชื่อมต่อโฟลเดอร์นี้กับเอกสารของคุณ
4. สร้างแบบฟอร์มด้วยพารามิเตอร์ต่อไปนี้:
ในนั้น อย่าลืมสร้างฟิลด์สำหรับป้อนข้อมูลของคุณ
5. ไปที่ไฟล์ form1.php ในไดเร็กทอรีที่มีไซต์ซึ่งเขียนว่า:
ตอนนี้ เมื่อส่งแบบฟอร์ม เบราว์เซอร์จะแสดงข้อมูลเกี่ยวกับข้อมูล
ในไฟล์เดียวกัน คุณสามารถเขียนว่าจะแสดงอะไรหรืออย่างไรในไฟล์เดียวกัน คุณยังสามารถเขียนวงจรหรืออัลกอริธึมได้ที่นี่
กำลังส่งแบบฟอร์ม ajax jquery
1. ในไฟล์ form.js ที่สร้างขึ้น คุณต้องเขียนโค้ดที่รับผิดชอบในการทำให้ไฟล์ทำงานหลังจากที่โหลดหน้าเว็บไซต์จนเต็มแล้ว
$(document).ready(function(){ //โค้ดถัดไปของเราจะรันที่นี่ });
2. จากนั้นคุณต้องปรับแต่งปุ่มส่ง ทำทุกอย่างในไฟล์เดียวกัน
$("form")).submit(function(event) { event.preventDefault(); //โค้ดต่อไปนี้จะถูกเขียนที่นี่ });
ส่วนแรกของรหัสมีหน้าที่ในการเลือกองค์ประกอบบนหน้า และส่วนที่สองมีหน้าที่ป้องกันการกระทำเริ่มต้น
3. ตัวอย่างเช่น ส่งแบบฟอร์ม ajax เมื่อสำเร็จ
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
ต่อไปนี้คือคำอธิบายโดยละเอียดของการตั้งค่าแต่ละอย่าง
- ประเภท -นี่คือประเภทของคำขอที่ส่งในแบบฟอร์ม เนื่องจากมีค่าใช้จ่าย POST ประเภทคำขอจึงเหมาะสม
- นี้ - การเลือกองค์ประกอบภายในโครงสร้าง;
- attr - ย่อมาจากสถานที่ท่องเที่ยว (สถานที่ท่องเที่ยว) นั่นคือพารามิเตอร์บางอย่างของเป้าหมายที่เลือก (แบบฟอร์ม) ถูกดึงดูด
- url - พารามิเตอร์ที่รับผิดชอบในการส่งคำขอ; ในกรณีนี้ สิ่งที่เขียนในพารามิเตอร์ของแบบฟอร์ม (form1.php);
- data - ระบุข้อมูลแบบฟอร์ม
- contentType - รับผิดชอบในการส่งส่วนหัวไปยังเซิร์ฟเวอร์ ในกรณีนี้ไม่จำเป็น
- cache - รับผิดชอบในการบันทึกแคชของผู้ใช้
- processData - รับผิดชอบในการแปลงข้อมูลเป็นสตริง
- success - แสดงผลการส่งข้อมูลสำเร็จ ดังนั้น หากการส่งข้อมูลสำเร็จ การดำเนินการของฟังก์ชันก็จะถูกดำเนินการ
4. เสร็จแล้ว เมื่อส่งแบบฟอร์ม ajax คุณจะได้รับข้อมูลโดยไม่ต้องรีเฟรชหน้า
ผลลัพธ์สามารถเปลี่ยนแปลงได้โดยใช้ไฟล์ form1.php ซึ่งคุณสามารถระบุได้ว่าจะแสดงผลลัพธ์ใด ตัวอย่างเช่น
คุณสามารถทดลองและสร้างการตรวจสอบความถูกต้องของการป้อนข้อมูลบางอย่างได้: หากข้อมูลไม่ถูกต้อง ระบบจะแสดงข้อความที่ต้องการ มิฉะนั้นจะเปลี่ยนเส้นทางไปยังหน้าที่ถูกต้อง อะไรหลายๆ อย่างก็เป็นไปได้เช่นกันตามใจคุณ
ตัวอย่างอาแจ็กซ์ นอกจากนี้ยังมีการส่งข้อมูลไปยังเซิร์ฟเวอร์แบบอะซิงโครนัส นี่คือเวลาที่ผู้ใช้ป้อนข้อความ และจะถูกเน้นด้วยสีแดงทันที แสดงว่าข้อมูลที่ป้อนไม่ถูกต้อง เกี่ยวกับมันมีคู่มือมากมายบนอินเทอร์เน็ต ซึ่งทุกอย่างชัดเจนอธิบายและแสดงพร้อมตัวอย่าง
สรุป
ไม่ต้องสงสัยเลยว่า ajax เป็นเครื่องมือที่มีประโยชน์ในการสร้างเว็บไซต์ เพื่อสร้างเพจและอินเทอร์เฟซคุณภาพสูง จำเป็นอย่างยิ่ง เป็นที่น่าสังเกตว่าการรู้ jQuery เป็นสิ่งสำคัญมากเพื่อให้เข้าใจรูปภาพและสิ่งที่เขียนในโค้ดอย่างเต็มที่ เพราะการคัดลอกและวางแบบธรรมดาไม่สามารถช่วยและสอนให้คุณเข้าใจโค้ดได้เสมอไป ควรจำไว้เสมอว่าเวอร์ชันภาษาได้รับการอัปเดตและคุณลักษณะบางอย่างอาจหายไป ดังนั้น ไม่ใช่วิธีแก้ปัญหาทั้งหมดที่อาจเกี่ยวข้อง บ่อยครั้งที่โค้ดที่เขียนไว้ใช้งานไม่ได้หรือไม่ให้ผลลัพธ์ที่คุณต้องการเห็นบนหน้าจอ
