เขียน 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 จะเป็น https://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)

Posted by Jirayu

WordPress Developer ที่พอมีประสบการณ์อยู่บ้าง วันไหนไม่ทำงานอยู่บ้านว่างๆ ก็นั่งเลี้ยงแมว

Comments