Ajax là gì trong WordPress? Cách sử dụng Ajax trong WordPress?

1. Ajax trong wordpress là gì?

Ajax (Asynchronous JavaScript and XML) trong WordPress là một kỹ thuật giúp trang web có thể tải dữ liệu từ server mà không cần phải tải lại toàn bộ trang. Điều này mang lại trải nghiệm người dùng mượt mà hơn và giảm thời gian chờ đợi khi thực hiện các tác vụ như nạp nội dung mới, gửi biểu mẫu, hoặc cập nhật thông tin.

2. Ajax thường được sử dụng trong trường hợp nào?

• Cập nhật nội dung trang mà không tải lại trang (ví dụ: nạp thêm bài viết khi cuộn trang xuống cuối).
• Gửi biểu mẫu (như biểu mẫu liên hệ) mà không cần tải lại trang.
• Tạo các tương tác động như bình chọn, đánh giá, hoặc thêm sản phẩm vào giỏ hàng.

3. Cách sử dụng Ajax trong wordpress?

Bước 1: Đăng ký file JAVASCRIPT

// functions.php

function register_js_files() {
wp_enqueue_script(“my_ajax_script”, get_template_directory_uri() . “/js/script.js”);
}
add_action(“wp_enqueue_scripts”, “register_js_files”);

Bước 2: Truyền dữ liệu từ  PHP sang fiel JAVASCRIPT

Thông thường chúng ta cũng cần các biến phía máy chủ trong JavaScript. Nhưng đối với điều này WordPress cũng có chức năng wp_add_inline_script(). Hàm này cung cấp cho chúng ta khả năng lưu trữ bất kỳ dữ liệu nào trong một biến JavaScript.

// functions.php

function register_js_files() {
wp_enqueue_script(“my_ajax_script”, get_template_directory_uri() . “/js/script.js”);
wp_add_inline_script(
“my_ajax_script”,
“const PHPVARS = ” . json_encode(array(
“ajaxurl” => admin_url(“admin-ajax.php”),
“another_var” => get_bloginfo(“name”)
)),
“before”
);
}
add_action(“wp_enqueue_scripts”, “register_js_files”);

Bước 3: Gửi yêu cầu AJAX đến máy chủ:

Với một đầu ra gỡ lỗi đơn giản, giờ đây chúng ta có thể xem các biến PHP của mình trong đối tượng JavaScript tức là JavaScript:

console.log(PHPVARS);

 

let obj = {action: ‘get_time’};

$.getJSON(PHPVARS.ajaxurl, obj, function(data) {
console.log(data);
});

Bước 4: Lập trình chức năng PHP

Đưa Ajax thành một file bổ sung và đưa nó vào hàm.php .

// functions.php

require_once(__DIR__ . “/ajax/get-time.php”);

// ajax/get-time.php

<?php
add_action(“wp_ajax_nopriv_get_time”, “ajax_get_time”);
add_action(“wp_ajax_get_time”, “ajax_get_time”);

function ajax_get_time() {
$time = date(“d.m.Y H:i:s”);
$id = uniqid();

$result = array(
“time” => $time,
“id” => $id
);

echo json_encode($result);
die();
}
?>

Bước 5: Xử lý dữ liệu PHP trong JAVASCRIPT

Bằng cách sử dụng hàm getJSON(), chúng ta có thể truy cập trực tiếp vào các thuộc tính phản hồi JSON:

let obj = { action: ‘get_time’ };
$.getJSON(PHPVARS.ajaxurl, obj, function (data) {
console.log(data.id); // e.g. 644d23d89289a
console.log(data.time); // e.g. 01.01.1970 14:04:08
});