วิธี load() ของ jQuery AJAX

วิธี load() ของ jQuery

วิธี load() ของ jQuery คือ AJAX วิธีที่ง่ายและแข็งแกร่ง

วิธี load() จะนำข้อมูลในบริการเซิร์ฟเวอร์มาโหลด และใส่ข้อมูลที่ได้รับไปยังองค์ประกอบที่เลือก

ภาษา:

$(คือ parameter ที่เป็นความจำเป็น).load(คือ parameter ที่กำหนด URL ที่ต้องการโหลด).load(callback,

); คือ parameter ที่เป็นความจำเป็น URL

คือ parameter ที่กำหนดค่าตัวชนิดเรียกใช้เมื่อส่งคำอธิบายต่อไป คือ parameter ที่กำหนด URL ที่ต้องการโหลด data

คือ parameter ที่กำหนดค่าตัวชนิดเรียกใช้เมื่อส่งคำอธิบายต่อไป callback callback คือ function ที่จะทำงานหลังจาก load() สำเร็จ

นี่คือเนื้อหาของไฟล์ตัวอย่าง ("demo_test.txt"):

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

ตัวอย่างด้านล่างจะโหลดเนื้อหาของไฟล์ "demo_test.txt" ไปยัง element <div> ที่กำหนด:

ตัวอย่าง

$("#div1").load("demo_test.txt");

ลองด้วยตัวเอง

เช่นเดียวกัน คุณสามารถเพิ่ม jQuery selector ไปที่ parameter URL

ตัวอย่างด้านล่างจะโหลดเนื้อหาของ element ที่มี id="p1" ในแบบไฟล์ "demo_test.txt" ไปยัง element <div> ที่กำหนด:

ตัวอย่าง

$("#div1").load("demo_test.txt #p1");

ลองด้วยตัวเอง

callback คือ parameter ที่เลือกใช้เมื่อ load() มีความสำเร็จ ซึ่งตัวฟังก์ชันที่จะทำงานทันทีหลังจาก load() สำเร็จ ฟังก์ชันที่จะทำงานได้ตั้งค่า parameter ต่าง ๆ:

  • responseTxt - มีเนื้อหาที่สำเร็จในการเรียก
  • statusTXT - มีสถานะที่เรียก
  • xhr - มี XMLHttpRequest ตัว

ตัวอย่างด้านล่างจะแสดงให้เห็นตัวตนตามที่มีการสร้างโดย load() มีความสำเร็จ แสดงข้อความ "การโหลดเนื้อหาภายนอกสำเร็จ! " และถ้ามีความผิดพลาด จะแสดงข้อความข้อผิดพลาด:

ตัวอย่าง

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("การโหลดเนื้อหาภายนอกสำเร็จ! ");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

ลองด้วยตัวเอง

jQuery AJAX คู่มืออ้างอิง

ถ้าคุณต้องการค้นหาเอกสาร AJAX มีทั้งหมด โปรดเข้าถึง jQuery AJAX คู่มืออ้างอิง。