การ include ไฟล์ HTML ด้วยคำสั่ง load jQuery

การ include ไฟล์ HTML ด้วยคำสั่ง load jQuery บทความนี้สอนใช้ jQuery Framework เพื่อ include ไฟล์ .html ในเว็บไซต์ HTML โดยไม่ได้ใช้ภาษา Server-side scripting พร้อมแสดงผลลัพธ์ออกสู่หน้าจอ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง การ include ไฟล์ HTML ด้วยคำสั่ง load jQuery

1. ติดตั้ง jQuery Framework โดยการวางโค้ด CDN ด้านล่างไว้ภายในแท็ก body ของเว็บไซต์

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

2. สร้างไฟล์ test.html พร้อมตัวอย่างข้อมูล

<b>Hello World จาก test.html</b>

3. สร้างไฟล์ index.html และเขียนโค้ด include ไฟล์ HTML จาก index.html ไปที่ test.html

<div id="data"></div>

<script>
    $("#data").load( "test.html" );
</script>

ผลลัพธ์

Hello World จาก test.html

การ include ไฟล์ HTML จากตัวอย่างติดตั้ง jQuery Framework จากนั้นสร้าง div เพื่อใช้สำหรับเป็นพื้นที่การแสดงผลข้อมูลจากการ include กำหนด id = data และเขียน jQuery อ้างถึง id = data เรียกใช้คำสั่ง load เพื่อ include หรือโหลดข้อมูลจากไฟล์ test.html มาแสดงที่ index.html