jQuery ajax - load() 方法

คู่มือ jQuery Ajax

实例

使用 AJAX 请求来改变 div 元素的文本：

$("button").click(function(){
  $("div").load('demo_ajax_load.txt');
});

亲自试一试

您可以在页面底部找到更多 TIY 实例

定义和用法

load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。

หมายเหตุ：还存在一个名为 load 的 jQuery 事件方法。调用哪个，取决于参数。

语法

load(url,data,function(response,status,xhr))
参数 描述
url กำหนด URL ที่จะส่งคำขอ
data ใช้ได้เลือก ข้อมูลที่จะส่งไปยังเซิร์ฟเวอร์
function(response,status,xhr)

ใช้ได้เลือก ฟังก์ชันที่จะทำงานเมื่อการขอสำเร็จ

ตัวอักษรเพิ่มเติม

  • response - มีข้อมูลที่ได้รับมาจากการขอ
  • status - มีสถานะของการขอ ("success", "notmodified", "error", "timeout", หรือ "parsererror")
  • xhr - มี XMLHttpRequest object

รายละเอียด

วิธีนี้เป็นวิธีที่ง่ายที่สุดในการขอข้อมูลจากเซิร์ฟเวอร์ มันเกือบเท่ากับ $.get(url, data, success) แต่ต่างกันคือมันไม่ใช่ฟังก์ชันทั่วไป และมี callback function ซึ่งไม่ได้กำหนดไว้ ขณะที่มีการตรวจสอบการตอบสนองที่สำเร็จ (เช่นเมื่อ textStatus คือ "success" หรือ "notmodified") .load() จะใส่ HTML ขององค์ประกอบที่ตรงกันที่กับข้อมูลที่กลับมา นี่หมายความว่าการใช้วิธีนี้ส่วนใหญ่จะง่ายต่อการใช้งาน

$("#result").load("ajax/test.html");

ถ้ามีฟังก์ชันคอลบแบค ฟังก์ชันนี้จะทำงานหลังจากการประมวลเนื้อหาเพิ่มเติม

$("#result").load("ajax/test.html", function() {
  alert("Load was performed.");
});

ในตัวอย่างสองตัวที่ข้างต้น ถ้าเอกสารปัจจุบันไม่มี ID "result" จะไม่ทำกระบวนการ .load()

ถ้าข้อมูลที่ให้เป็นอ็อบเจ็กท์ ใช้วิธี POST ไม่เช่นนั้นใช้วิธี GET

โหลดเนื้อหาเพจส่วนต่างๆ

วิธี .load() ต่างจาก $.get() โดยอนุญาตให้เรากำหนดส่วนใดของเอกสารที่จะใส่เข้ามา นี่จะทำได้ผ่านการใช้ภาษาสyntax พิเศษของตัวอักษร url ถ้าตัวมันมีช่องว่างหลายตัว ตัวมันที่มีช่องว่างแรกหลังจากช่องว่างครั้งแรกคือ jQuery selector ที่ใช้เพื่อกำหนดเนื้อหาที่จะโหลด

เราสามารถแก้ไขตัวอย่างที่ข้างต้นเพื่อใช้ส่วนใดส่วนหนึ่งของเอกสารที่ได้รับมา

$("#result").load("ajax/test.html #container");

ถ้าทำการปฏิบัติกระบวนการนี้ จะนำกลับเนื้อหาของ ajax/test.html แต่หลังจากนั้น jQuery จะประมวลเนื้อหาที่กลับมาเพื่อหาองค์ประกอบที่มี ID ตัวเลข ครับ และเนื้อหาของเขาจะถูกใส่ลงในองค์ประกอบที่มี ID ผลลัพธ์ ส่วนที่เหลือของเนื้อหาที่นำกลับจะถูกทิ้งไว้

jQuery ใช้คุณสมบัติ .innerHTML ของเบราซเซอร์เพื่อประมวลเอกสารที่ถูกหามา และใส่เข้าไปในเอกสารปัจจุบัน ในกระบวนการนี้ เบราซเซอร์จะเคลือ่ออกส่วนที่เป็นองค์ประกอบเช่น <html>, <title> หรือ <head> ส่งผลที่มีอยู่คือ องค์ประกอบที่ถูก .load() หามาอาจไม่เหมือนองค์ประกอบที่ถูกหามาโดยตรงจากเบราซเซอร์

หมายเหตุ：เนื่องจากข้อจำกัดด้านความปลอดภัยของเบราซเซอร์ ส่วนใหญ่ของ request "Ajax" ตามกฎหมาย origin ไม่สามารถรับข้อมูลที่มาจากโดเมนที่ต่างกัน หรือโดเมนย่อย หรือโดเมนที่มีโปรโตคอลต่างกันได้ สามารถรับข้อมูลสำเร็จ

ตัวอย่างเพิ่มเติม

ตัวอย่าง 1

โหลดเนื้อหาของไฟล์ feeds.html

$("#feeds").load("feeds.html");

ตัวอย่าง 2

เหมือนตัวอย่างที่ขึ้นไป แต่ส่ง parameter ติดตามด้วย POST และแสดงข้อความเมื่อประสบความสำเร็จ：

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("The last 25 entries in the feed have been loaded");
});

ตัวอย่าง 3

โหลดส่วนของเนื้อหาด้านขวาของบทความเข้าไปใส่รายการไม่มีลำดับ：

HTML โค้ด：

<b>jQuery Links:</b>
<ul id="links"></ul>

jQuery โค้ด：

$("#links").load("/Main_Page #p-Getting-Started li");

ตัวอย่าง TIY มากกว่า

สร้าง AJAX request และส่งข้อมูลผ่าน request นั้น
วิธีการใช้ parameter data ในการส่งข้อมูลผ่าน AJAX request (ตัวอย่างนี้ได้ถูกอธิบายในตัวอย่าง AJAX tutorial)
สร้าง AJAX request และใช้ callback function
วิธีการใช้ parameter function ในการจัดการข้อมูลผลลัพธ์จาก AJAX request
สร้าง AJAX request ที่มี error
วิธีการใช้ parameter function ในการจัดการ error ใน AJAX request (ใช้ parameter XMLHttpRequest)

คู่มือ jQuery Ajax