jQuery AJAX Load

ในบทที่ 1 เคยมีการกล่าวถึงหลักการของ AJAX มาแล้ว 

AJAX จะทำการแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์ และแสดงผลโดยไม่มีการโหลดหน้าใหม่ ส่วน jQuery AJAX สามารถใช้งานทำงานของ AJAX ได้ง่าย และสะดวกมากยิ่งขึ้น ถ้าหากไม่มี jQuery AJAX จะทำให้เกิดความยุ่งยากทั้งในเรื่องการเขียน หรือปัญหาเล็กๆน้อยที่เกิดจากความแตกต่างของเบราว์เซอร์

 

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

$(selector).load(URL , data , callback);
  • URL พารามิเตอร์ที่กำหนดที่อยู่ของสิ่งที่ต้องการนำมาแสดงผล
  • data เป็นค่าที่ส่งมาพร้อมกับการร้องขอ (request) เพื่อระบุสิ่งที่ต้องการอย่างชัดเจน
  • callback เป็นพารามิเตอร์ที่ใช้เรียกชื่อฟังก์ชันหลังจากที่ดำเนินการโหลดเสร็จสมบูรณ์ 

 

ไฟล์สมมติ ชื่อ test_load.txt โดยมีข้อมูลภายในดังนี้

<h1>H1</h1>
<h2>H2</h2>

<p>Hello World 1</p>
<p id="txt1">Hello World 2</p>

ไฟล์ที่ 1 test_load.txt

 

ตัวอย่างที่ 1 load() พื้นฐาน

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("test_load.txt");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

ไฟล์ที่ 2 load.php

จากไฟล์ที่ 2 เป็นการดึงข้อมูลไฟล์ test_load.txt มาแสดง แบบปกติ ซึ่งไม่มีการกำหนดค่าพิเศษใดๆ

 

ตัวอย่างที่ 2 load() ระบุสิ่งที่ต้องการแสดงผลด้วย

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("test_load.txt h2");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

ไฟล์ที่ 3 load()-2

ไฟล์ที่ 3 เป็นการดึงข้อมูลไฟล์ test_load.txt มาแสดง โดยกำหนดพารามิเตอร์ในส่วนของ data เป็น h2 ซึ่งมีความหมายว่าเลือกข้อมูลที่เป็น h2 เท่านั้นในมาแสดงผล

 

ในส่วนของ callback หลังจากที่ดำเนินการเรียบร้อยแล้วนั้น สามารถเรียกพารามิเตอร์ที่แตกต่างกันได้ 

  • responseTxt – เป็นผลลัพธ์ของเนื้อหา
  • statusTxt – สถานะ
  • xhr – มีวัตถุ XMLHttpRequest

 

ตัวอย่างที่ 3 สร้างผลลัพธ์ตอบกลับของการโหลด

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("test_load.txt", function(responseTxt, statusTxt, xhr){
      if(statusTxt == "success")
        alert("โหลดไฟล์สำเร็จ");
      if(statusTxt == "error")
        alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

ไฟล์ที่ 4 load()-3

จากไฟล์ที 4 สามารถอธิบายได้ว่า หากทำการโหลดไฟล์สำเร็จให้แสดงป๊อบอัพ ว่า โหลดไฟล์สำเร็จ

 

 

 

 

 

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: