jQuery - วิธีโหลด AJAX ()
jQuery load() วิธีการ
วิธี jQuery load()เป็นวิธีการ AJAX ที่เรียบง่าย แต่ทรงพลัง
เมธอด จะload()โหลดข้อมูลจากเซิร์ฟเวอร์และนำข้อมูลที่ส่งคืนมาไว้ในองค์ประกอบที่เลือก
ไวยากรณ์:
$(selector).load(URL,data,callback);
พารามิเตอร์ URL ที่จำเป็นจะระบุ URL ที่คุณต้องการโหลด
พารามิเตอร์ข้อมูลทางเลือกระบุชุดของคู่คีย์/ค่าสตริงการสืบค้นที่จะส่งไปพร้อมกับคำขอ
พารามิเตอร์เรียกกลับที่เป็นทางเลือกคือชื่อของฟังก์ชันที่จะดำเนินการหลังจาก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" ลงใน<div>องค์ประกอบเฉพาะ:
ตัวอย่าง
$("#div1").load("demo_test.txt");
นอกจากนี้ยังสามารถเพิ่มตัวเลือก jQuery ให้กับพารามิเตอร์ URL
ตัวอย่างต่อไปนี้จะโหลดเนื้อหาขององค์ประกอบที่มี id="p1" ภายในไฟล์ "demo_test.txt" ลงใน<div>องค์ประกอบเฉพาะ:
ตัวอย่าง
$("#div1").load("demo_test.txt #p1");
พารามิเตอร์การเรียกกลับที่เป็นทางเลือกระบุฟังก์ชันการเรียกกลับเพื่อเรียกใช้เมื่อ
load()วิธีการเสร็จสิ้น ฟังก์ชันเรียกกลับสามารถมีพารามิเตอร์ต่างๆ ได้:
responseTxt- มีเนื้อหาผลลัพธ์หากการโทรสำเร็จstatusTxt- มีสถานะของการโทรxhr- มีวัตถุ XMLHttpRequest
ตัวอย่างต่อไปนี้จะแสดงกล่องแจ้งเตือนหลังจากเมธอด load() เสร็จสิ้น หากload()วิธีการนี้สำเร็จ จะแสดง "เนื้อหาภายนอกที่โหลดสำเร็จ!" และหากล้มเหลว จะแสดงข้อความแสดงข้อผิดพลาด:
ตัวอย่าง
$("button").click(function(){
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
การอ้างอิง jQuery AJAX
สำหรับภาพรวมทั้งหมดของเมธอด jQuery AJAX โปรดไปที่การอ้างอิง jQuery AJAXของ เรา