ล่าสุดการพัฒนาเว็บบทเรียน
 

jQuery - AJAX load() Method

❮ก่อนหน้า ถัดไปบท❯

jQuery load() วิธี

jQuery load() วิธีการเป็นง่าย แต่มีประสิทธิภาพวิธี AJAX

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

ไวยากรณ์:

$(selector).load(URL,data,callback);

พารามิเตอร์ URL ต้องระบุ URL ที่คุณต้องการที่จะโหลด

พารามิเตอร์ตัวเลือกข้อมูลที่ระบุชุดของ querystring คู่คีย์ / ค่าที่จะส่งไปพร้อมกับการร้องขอ

พารามิเตอร์ตัวเลือกการเรียกกลับเป็นชื่อของฟังก์ชั่นที่จะดำเนินการหลังจากที่ 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() วิธีการได้ประสบความสำเร็จก็จะแสดง "External content loaded successfully!" และถ้ามันล้มเหลวก็จะแสดงข้อผิดพลาด:

ตัวอย่าง

$("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 อ้างอิง


❮ก่อนหน้า ถัดไปบท❯