Thay thế admin-ajax.php bằng REST API + Fetch: Giải pháp nhẹ, nhanh, chuẩn

Giới thiệu

REST API là chuẩn giao tiếp được WordPress hỗ trợ sẵn, cho phép bạn lấy hoặc gửi dữ liệu từ/đến máy chủ thông qua các endpoint có cấu trúc rõ ràng. Khi kết hợp với Fetch API của JavaScript, bạn không cần jQuery mà vẫn có thể xử lý dữ liệu mượt mà — từ gọi bài viết, xử lý form đến quản lý người dùng.

1. Tạo endpoint tùy chỉnh trong WordPress

Thêm đoạn mã sau vào file functions.php hoặc plugin của bạn để tạo một endpoint REST API mới:

add_action('rest_api_init', function () {
    register_rest_route('demo/v1', '/latest-post', [
        'methods'  => 'GET',
        'callback' => 'get_latest_post',
        'permission_callback' => '__return_true',
    ]);
});

function get_latest_post($request) {
    $cat_id = isset($request['cat']) ? intval($request['cat']) : 0;
    $query = new WP_Query([
        'posts_per_page' => 1,
        'cat' => $cat_id,
    ]);
    
    $data = [];

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $data[] = [
                'cat_name' => get_cat_name($cat_id),
                'cat_link' => get_category_link($cat_id),
                'title'    => get_the_title(),
                'link'     => get_permalink(),
            ];
        }
        wp_reset_postdata();
    }

    return rest_ensure_response($data);
}

Endpoint bạn vừa tạo có dạng:
/wp-json/demo/v1/latest-post?cat=1

2. Gửi yêu cầu bằng Fetch API

Giờ bạn có thể gọi dữ liệu từ JavaScript mà không cần tải lại trang:

fetch('/wp-json/demo/v1/latest-post?cat=1')
  .then(response => response.json())
  .then(data => {
    if (data.length) {
      const html = `
        <a href="${data[0].cat_link}">${data[0].cat_name}</a>
        <a href="${data[0].link}">${data[0].title}</a>
      `;
      document.getElementById('latest-post').innerHTML = html;
    }
  })
  .catch(error => console.error('Lỗi khi gọi API:', error));

Đảm bảo trong HTML của bạn có một vùng đích để hiển thị kết quả:

<div id="latest-post">Đang tải dữ liệu...</div>

Lợi ích của cách này

• Không cần jQuery — dùng JavaScript hiện đại (Fetch).
• Sử dụng hệ thống REST API chuẩn của WordPress.
• Tách biệt rõ logic backend và frontend.
• Tối ưu performance, không qua trung gian admin-ajax.php.

Lưu ý bảo mật

• Nếu endpoint xử lý dữ liệu nhạy cảm (như cập nhật, xóa), hãy thiết lập permission_callback cẩn thận để chỉ người có quyền mới gọi được.
• Đối với phương thức POST hoặc DELETE, hãy dùng nonce để xác thực (có thể chèn nonce vào HTML và kiểm tra bằng check_ajax_referer() hoặc wp_verify_nonce()).

Kết luận

Fetch API kết hợp với REST API là hướng đi hiện đại và mạnh mẽ khi phát triển tính năng động trong WordPress. Không chỉ nhanh và nhẹ hơn, cách làm này còn giúp bạn viết code rõ ràng, dễ bảo trì và dễ mở rộng — đặc biệt phù hợp cho những plugin hoặc theme có phần frontend phức tạp.

Chúc bạn áp dụng thành công và hiện đại hóa hệ thống của mình theo đúng tinh thần JavaScript mới!