เขียน AJAX บน WordPress
ปกติเวลาที่เราเขียน AJAX กัน การรับส่งข้อมูลระหว่างเบราเซอร์และเซิร์ฟเวอร์ จำเป็นจะต้องมี handler ตัวหนึ่งคอยจัดการ (ก็ที่เราสร้างออพเจ็กท์ xhr เรียกไปหาสคริปท์บนเซิร์ฟเวอร์สักตัวหนึ่ง เช่น xhr.php นั่นแหละ) ซึ่งหลายๆ คนที่เป็นมือใหม่เวิร์ดเพรส อาจจะมีคำถามว่า แล้วบนเวิร์ดเพรสมันทำยังไง?
ในการทำ AJAX บนเวิร์ดเพรสนั้น เวิร์ดเพรสจะเตรียม action ตัวหนึ่งเอาไว้ให้เรา นั่นคือ wp_ajax วิธีใช้ของมันก็คือจัดการ add_action(); เข้าไป โดย action ที่จะใช้คือ wp_ajax_xxxx โดย xxxx จะเป็นชื่ออะไรก็ได้ที่เราต้องการใช้ โดยชื่อนี้จะเอาไว้เรียกหาแอคชันนี้ด้วย admin-ajax.php (ผมรู้ว่างง เดี๋ยวอ่านๆ ไปจะเก็ตเอง)
เอาล่ะ มาดูโค๊ดกัน
<?php add_action("wp_ajax_myxhr", "myajax"); function myajax(){ ... die(); } ?>
อันนี้คือการ add_action(); ปกติของเวิร์ดเพรส โดยพารามิเตอร์แรกจะเป็นชื่อแอคชัน และพารามิเตอร์ที่สองจะเป็นชื่อฟังก์ชันที่เราจะใช้ สังเกตุว่าเราจะใส่ die(); ลงไปที่ท้ายฟังก์ชันด้วย เพราะว่าถ้าเราไม่สั่ง die(); ตัว admin-ajax.php มันจะพ่นค่าต่อท้ายออกมา (เอาจริงๆ ผมก็ไม่รู้เหมือนกันว่ามันคือค่าของอะไร) ทำให้ xhr ของเราเจ๊งได้ครับ อย่างนี้
ดังนั้นเราจึงต้องสั่ง die(); ก่อนเพื่อไม่ให้ admin-ajax.php มันพ่นค่าอะไรอย่างอื่นออกมานั่นเอง แบบนี้
และหากสังเกตุจากรูปข้างบน เราจะเห็นว่า url ของ handler จะเป็น http://jirayu.in.th/wp-admin/admin-ajax.php?action=myxhr ซึ่ง myxhr นั่นก็มาจาก add_action(“wp_ajax_myxhr“, “myajax”); นั่นเองครับ
ถามว่าจะรับค่าจากต่างๆ จากเบราเซอร์ยังไง?
ใช้ $_POST, $_GET, $_REQUEST กันหน้าด้านๆ นั่นแหละครับ เช่น
<?php add_action("wp_ajax_myxhr", "myajax"); function myajax() { $bloginfo = $_GET['bloginfo']; $return = get_bloginfo($bloginfo); echo json_encode($return); die(); } ?>
เราก็สามารถส่งค่ามาให้ผ่านทาง admin-ajax.php?action=myxhr&bloginfo=xxx ได้เลย
หวังว่า ณ จุดนี้แล้ว คงจะพอเข้าใจกันแล้วนะครับว่าเราจะปู้ยี่ปู้ยำกับ wp_ajax กันได้อย่างไรบ้าง
ในด้าน JavaScript ฝั่งหน้าเว็บ เราก็เขียน AJAX ไปตามปกติที่เราเคยเขียนกันครับ และปกติในเวิร์ดเพรสจะมี jQuery มาให้เราอยู่แล้ว เราก็สามารถใช้งาน jQuery.ajax(); ได้ในทันทีเลยเช่นกันครับ สำหรับว่า jQuery.ajax(); มันใช้ยังไง อันนี้ให้ลองไปอ่านใน API Documentation ของ jQuery.ajax(); ได้เลยครับ
อ้างอิง – WordPress Codex (action wp_ajax)