บล็อกนี้จะกล่าวถึงวิธีการโหลด div ซ้ำโดยไม่ต้องโหลดซ้ำทั้งหน้าใน JavaScript
จะโหลด div ซ้ำโดยไม่ต้องโหลดทั้งหน้าใน jQuery ได้อย่างไร
“ แผนก ” สามารถโหลดซ้ำได้โดยไม่ต้องโหลดซ้ำทั้งหน้าโดยใช้เมธอด “on()” ของ jQuery ร่วมกับ “ โหลด () ' กระบวนการ.
เมธอด on() จะเชื่อมโยงตัวจัดการเหตุการณ์ตั้งแต่หนึ่งตัวขึ้นไปสำหรับองค์ประกอบ และเมธอด load() จะโหลดเนื้อหาลงในองค์ประกอบที่ดึงมา เมธอดเหล่านี้สามารถใช้ร่วมกันเพื่อเข้าถึง div และโหลดซ้ำเมื่อเหตุการณ์ถูกทริกเกอร์
ตัวอย่าง
มาดูภาพรวมโค้ด HTML ต่อไปนี้:
< ร่างกาย >
< ชั่วโมง2 > นี่คือวิธีโหลด div ซ้ำโดยไม่ต้องโหลดซ้ำทั้งหน้า ชั่วโมง2 >
< รหัส div = 'มายดิฟ' >
< หน้า > JavaScript เป็นภาษาโปรแกรมที่มีฟังก์ชันต่างๆ , ตัวแปร , เหตุการณ์และวัตถุ ฯลฯ หน้า >
แผนก >
< ปุ่ม > โหลดใหม่ ปุ่ม >
ร่างกาย >
ในบล็อกรหัสด้านบน:
- รวมหัวข้อที่ระบุ
- นอกจากนี้ ระบุองค์ประกอบ “” ที่มีแอตทริบิวต์ “id”
- หลังจากนั้น ให้รวมย่อหน้าไว้ในแท็ก “
” และปุ่มเพื่อเรียกใช้ฟังก์ชันที่ต้องการ
ทีนี้ มาดูโค้ด JavaScript กัน:
< สคริปต์ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' >
สคริปต์ >
< สคริปต์ >
$ ( 'ปุ่ม' ) . บน ( 'คลิก' , การทำงาน ( ) {
$ ( '#myDiv' ) . โหลด ( '#myDiv' )
เตือน ( 'โหลดใหม่' )
} ) ;ในข้อมูลโค้ดนี้
- รวมไลบรารี jQuery ผ่าน ' src ' คุณลักษณะ.
- เข้าถึงปุ่มที่สร้างขึ้นและเชื่อมโยง “ บน() ' กระบวนการ.
- สิ่งนี้จะเรียกใช้ฟังก์ชันดังกล่าวเมื่อคลิกปุ่มดังที่เห็นได้จากเหตุการณ์ที่แนบมา ' คลิก '.
- ในคำจำกัดความของฟังก์ชัน ให้เข้าถึง ' ” องค์ประกอบและโหลดอีกครั้งโดยใช้ “ โหลด () ” วิธีการโดยอ้างถึง “ รหัส '.
- เป็นผลให้ div ที่รวมอยู่จะถูกโหลดอีกครั้งเมื่อคลิกปุ่ม และข้อความที่ระบุผ่านกล่องโต้ตอบการแจ้งเตือนจะแสดงขึ้น
เอาต์พุต
สังเกตได้ว่าโหลด div สำเร็จโดยไม่ต้องโหลดซ้ำทั้งหน้า
บทสรุป
หากต้องการโหลด div ซ้ำโดยไม่โหลดซ้ำทั้งหน้า ให้ใช้ปุ่ม “ บน() วิธีการ ” ร่วมกับ “ โหลด () ' กระบวนการ. สามารถใช้เมธอดเหล่านี้เพื่อโหลดเนื้อหาของ div ซ้ำเมื่อเหตุการณ์ถูกทริกเกอร์โดยการเข้าถึงและอ้างอิงอีกครั้ง บล็อกนี้อธิบายวิธีการโหลด div ซ้ำโดยไม่ต้องโหลดซ้ำทั้งหน้า
- หลังจากนั้น ให้รวมย่อหน้าไว้ในแท็ก “