Ajax ใน jQuery เค้าได้เตรียมฟังก์ชั่นให้เราเรียบร้อยแล้ว คือ ajax()
โดยจะมีรูปแบบตามนี้เลยครับ คือ
$.ajax(settings);
ซึ่งเจ้า settings นี้แหละ จะใช้เป็นรูปแบบ JSON Object เพื่อกำหนดคุณสมบัติ โดยรูปแบบก็จะเป็นแบบข้างล่างนี้เลยครับ
$.ajax({ property : value, property : value, ..... ไปเรื่อยๆเลย });คุณสมบัติจริงๆมีใช้อยู่หลายค่า แต่เอาที่ใช้บ่อยๆ ก็ละกันนะครับ
- url ใช้กำหนด URL ที่เราจะส่งข้อมูลไป
- data ข้อมูลที่เราต้องการจาก server
- dataType ประเภทข้อมูล ที่จะส่งกลับมา HTML, XML, JSON
- error ตรวจดูว่ามี error ไหม?
- success เรียก Callback function เมื่อติดต่อกับ server สำเร็จแล้ว
- type ส่งข้อมูลไปที่ server แบบ GET หรือ POST
เราจะมายกตัวอย่างกันนะครับ กรณีมี files อยู่ด้วยกัน 2 file
- file ที่ 1 ชื่อว่า index.html
- file ที่ 2 ชื่อว่า server.html
index.html
<div id="showData"></div>
<script>
$(document).ready(function(){
helloAjax();
});
function helloAjax(){
$.ajax({
url : 'server.html';
success : function(data) {
$('#showData').html(data);
}
});
}
</script>server.html
<body>
<h1>ทดสอบ รับส่งข้อมูลแบบ Ajax</h1>
<p>ข้อความนี้มาจากไฟล์ชื่อ server.html นะครับ</p>
</body>อธิบายการทำงาน
เมื่อหน้าเว็บเพจโหลดเสร็จ จะไปเรียก function ที่ชื่อว่า helloAjax()
จากนั้นที่ function helloAjax ที่ไฟล์ index.html ก็จะส่งข้อความร้องขอไปที่ไฟล์ server.html
และเมื่อร้องขอสำเร็จ ติดต่อไฟล์ server.html ได้สำเร็จ ไฟล์ที่ชื่อว่า server.html ก็ส่งข้อมูลกลับไป ซึ่งก็คือ data
จากนั้น index.html ก็ทำการเอาข้อมูลที่อยู่ใน data ยัดเข้าไปใน <div> ที่มี id ชื่อว่า showData นั่นเอง
คอร์สเรียนที่แนะนำ HTML CSS JAVASCRIPT
ความเห็นล่าสุด