Ajax แบบง่ายๆ สไตล์ jQuery
เอาล่ะครับ อาจจะข้ามขั้นไปนิด ก็คนมันอยากเขียนอ่ะ บอกไว้ก่อนเลยนี่เป็นแค่ “First Step” เท่านั้น จะมาขอกล่าวเรื่อง พื้นๆที่ jQuery ทำได้ เกี่ยวกับ ajax ก่อน ลึกๆมันเขียนได้หลายรูปแบบมาก สามารถกำหนดลำดับการทำงาน ก่อนหลัง header รวมไปถึงข้อมูลที่รับ กลับมาได้ วันนี้เอา เบาะๆ แค่ การส่งค่าไปมาละกันเน้อ let’s begin….
การทำงานในส่วน ajax ของ jQuery นั้นค่อนข้างเป็นมิตรกับ SEO มากๆ เพราะตัวมันสามารถดักจับ events ต่างๆ ขณะที่เรากำลังไต่ไปในเอกสารได้ สำหรับวันนี้จะขอแนะนำแค่คำสั่งพื้นๆ ในการทำงานกับ ajax ของ jQuery สัก 2 คำสั่งจะได้ไม่ยากและงงกันจนเกินไปนะ
คำสั่งแรกคือการส่งค่าไปแบบ get และรับกับมาแบบ text ธรรมดา
รูปแบบ
$.get(url, params, callback);
การใช้งาน นั้นผมจะสมมุติว่า เราจะดัก event onclick ของ a ณ จุดใดจุดหนึ่งบนเอกสารละกัน เช่น
var lnk = $(this).attr('href');$.get(lnk, function(data) {
$("div#show-here").html(data);
});
return false;
});
จากโคดด้านบนผมจะมาขายความให้อ่านกัน
เบื้องต้นผมเขียนคำสั่งบอกว่า ถ้าแท๊ก a ที่มี rel=’ajax’ โดนคลิก ให้ไป get ค่า link จาก attribute href ออกมาใส่ในตัวแปร lnk จากนั้นเรียกคำสั่ง $.get ซึ่งเป็นการใช้งาน ajax ให้วิ่งไปที่ lnk (somewhere.php) แล้วคืนค่ากลับมาที่ data
จากนั้น ให้ไปค้นหา div ที่มี id เป็น show-here มาแล้วใส่ค่าเข้าไปในนั้นด้วยคำสั่ง html เท่านี้เองครับง่ายมากๆ เลยใช่มั้ย ^_^
ในตัวอย่างผมไม่มีการส่งค่าไป ถ้าเราจะส่งค่า โคดจะออกมาในลักษณะ ด้านล่างนี้
$.get("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);
ส่วนตัวที่สอง แค่เปลี่ยนจาก $.get เป็น $.post แต่อย่างอื่นทำงานเหมือนกันหมด เพียงแต่หน้า server side script ต้องรับค่าเป็น post ด้วย เช่น php จะใช้
$_POST['vars']
เอาล่ะครับ อย่างเพิ่งท้อ นี่แค่พื้นฐาน ajax เองความสามารถของ jQuery ที่ทำงานกับ ajax นั้นมีมากกว่านี้ ยกกำลังหลายเท่าเชียวครับ ติดตามอ่านด้วยละกัน
ศึกษาเพิ่มเติมตามที่เวบผู้พัฒนาโดยตรงได้ที่นี่
http://docs.jquery.com/Ajax
ตัวอย่างโคดจากผมเอง ดูที่นี่
http://jquerytips.com/example/ajax-basic.html
เอาละครับ วันนี้ขอพอแค่นี้ก่อนดึกแล้ว เร็วๆ นี้เจอกันใหม่พักนี้ขยันวุ้ย !
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
แจ่มมาก รีเควสปุ๊บได้ปั๊บ
อันนี้รู้สึกจะทำเพื่อ ไม่ให้โหลดเวปหน้าเดียวใหญ่ๆ มันจะช้า ให้โหลดเท่าที่จะใช้ (มั่ง)
ขอตัวอย่างหน่อยสิ จะดูโค๊ดอ่ะ งงมากๆ -*-
งงเหมือนกันแหะเรา กลับไปอ่านหลายๆ รอบดีกว่า
ดีใจที่มีคนเล่น Jquery ผมชอบมากเพราะ syntax ของเขาสวยงามดี เข้าใจง่าย
ok เข้าใจแล้ว ที่คน งงๆ อยู่ลอง view source หน้านี้ดูแล้ว สร้าง ไฟล์ func_info.phpแล้วสร้างเงื่อนไขแบบ ง่ายๆรับค่า query แล้ว echo ดู ขอบคุณบทความดีีๆครับผม