Hướng dẫn ajax trong WordPress với sự kiện select change form

Tuan_H · January 10, 2020, 6:33am

Sử dụng ưu điểm của Ajax trong việc load dữ liệu mà không cần phải tải lại trang giúp bạn tạo nên những tính năng rất hữu ích trong website.
Bài viết sau đây sẽ hướng dẫn bạn cách sử dụng ajax trong WordPress một cách đơn giản dễ hiểu nhất.
Cách sử dụng jQuery Ajax trong WordPress
Trước khi viết hướng dẫn, mình cũng tham khảo một số bài viết về cách sử dụng ajax trong WordPress khác trên mạng như:

How to Implement Ajax in WordPress Themes
HOW TO USE JQUERY AJAX IN WORDPRESS
Using AJAX With PHP on Your WordPress Site Without a Plugin
Tuy nhiên 1 số bài hướng dẫn khá nhiều và phức tạp , sau đây mình đang làm chức năng tạo 2 select , 1 select trong form hiển thị danh sách quận huyện, và bắt sự kiện change của select sẽ get data phường xã tương ứng với quận huyện .Select 2 sẽ hiển thị danh sách phường xã tương ứng với quận huyện.
WordPress cơ bản sử dụng wp_ajax_ & wp_ajax_nopriv_
Demo Code hiển thị select lấy danh sách phường xã ở sự kiện select change quận huyện
Với form search bên sidebar chọn quận huyện , phường xã.
Bước 1: Hiện thị option danh sách quận huyện từ database
Code demo:

<select id="quan_huyen" name="quan_huyen" class="form-control">
 <?php  
 $args = array(
 'taxonomy' =>'list-countys',
 'hide_empty' => 0,
 'parent' =>0
 );
 $listqh = get_terms($args);
 foreach( $listqh as $qh) :
 ?>
 <option value="<?php echo $qh->term_id;?>" <?php if ( $_REQUEST['quan_huyen'] == $qh->term_id ) echo 'selected="selected"'; ?> >
 <?php echo $qh->name;?> 
 </option>
 <?php endforeach;?>
 </select>

Ở đây mình tạo quận huyện là taxonomy.với slug là: list-countys, với get_terms là function() cùa WordPress để lấy data list taxonomy theo các tham số như trên. Bạn có thể tham khảo cách dùng get_terms từ WordPress tại đây: https://developer.wordpress.org/reference/functions/get_terms/ Ở đây mình sẽ bắt sự kiện khi người dùng click chọn 1 quận huyện thì sẽ gửi request tới server get data phường xã của quận huyện tương ứng ,mà server sẽ response lại ,

Bước 2: Sử dụng Ajax trong WordPress

<script>
 jQuery(document).ready(function($) { 
$("#quan_huyen").on('change', function(){
 var ajaxurl = '<?php echo admin_url("admin-ajax.php");?>'
 var id_qh = $(this).val();
 $.ajax({
 url: ajaxurl,
 type: 'post',
 data: {
 'action': 'get_px_by_ajax',
 'idqh': id_qh
 },
 success: function(data) {
 // this outputs the results of ajax request
 console.log(data);
 $("#phuong_xa").html(data);
 },
 error: function(errorThrown) {
 console.log(errorThrown);
 }
 });
 });
        });
</script>

Giải thích code: Ở đây select mình đặt id là : quan_huyen, dùng jquery bắt sự kiện change. Do mặc định ajax trong WordPress sẽ được xử lý trong wp-admin/admin-ajax.php, do đó trong script đặt biện url gửi server xử lý là đường dẫn tới file admin-ajax.php Ajax trong WordPress cũng như php thuần.

kiểu dữ liệu gửi đi ở đây là post.
id_qh là id taxonomy sẽ gửi tới server
get_px_by_ajax là function sẽ xử lý tại server với yêu cầu người dùng khi thay đổi quận huyện
Get data phường xã theo id quận huyện từ phía server Trong file functions.php bạn sẽ viết
function get_px_by_ajax với add_action wp_ajax_get_px_by_ajax

add_action('wp_ajax_get_px_by_ajax','get_px_by_ajax_callback');
add_action('wp_ajax_nopriv_get_px_by_ajax','get_px_by_ajax_callback');
function get_px_by_ajax_callback() {
	$id_px = isset($_REQUEST['idqh']) ? $_REQUEST['idqh'] : '55';
	$id_px = intval($id_px);
	$args = array(
		'hide_empty'	=>0,
		'taxonomy'		=>'list-countys',
		'parent'		=>$id_px
	);
	$list_px = get_terms($args);
	foreach ( $list_px as $px2 ) : 
	?>
		<option value="<?php echo $px2->term_id;?>"> <?php echo $px2->name;?> </option>
	<?php
	endforeach;
	
}

Giải thích:

wp_ajax_get_px_by_ajax, wp_ajax_nopriv_get_px_by_ajax là hai hook dùng cho xử lý ajax với tiền tố mặc định wp_ajax và wp_ajax_nopriv , với người dùng không login và login
Ở đây mình tạo Phường Xã là taxonomy là con của quận huyện , nên truy vấn parent: là id_qh get từ người dùng gửi
Server sẽ trả về list các option cho selection phường xã.
Khi server response lại , thành công bạn xem lại jquery phía trên sẽ dùng phương thức :
$("#phuong_xa").html(data);
để nhận data từ server phản hồi về. Hi vọng bài này sẽ giúp bạn hiểu cách dùng select động với ajax trong WordPress