Ajax là một công nghệ quan trọng trong việc tạo ra các chức năng tương tác động và đáp ứng nhanh. Trong WordPress, sử dụng Ajax giúp tạo ra các tính năng trên trang web mượt mà và tăng trải nghiệm người dùng. Tuy nhiên, đôi khi có thể gặp phải các lỗi không thể xử lý gửi (call) Ajax. Trong bài viết này, hãy cùng ItsmeIT tìm hiểu cách sử dụng Ajax trong WordPress cũng như cách sửa lỗi 404, 400 (Bad Request).
Cách sử dụng Ajax trong Wordpress và sửa lỗi 404, 400 (Bad Request)
Bước 1: Đăng ký File và khai báo các giá trị Ajax
Đăng ký FILE và khai báo các giá trị Ajax có nghĩa là chúng ta sẽ gọi file custom-ajax.js để chạy trên trình duyệt và khai báo cho nó những giá trị cần thiết cho chức năng mà bạn sẽ cần xử lý. Trong hướng dẫn này ItsmeIT sẽ viết code và sử dụng Ajax, xử lý trong một plugin Wordpress.
function enqueue_custom_ajax_script(){
wp_enqueue_script('handle-ajax-name', plugin_dir_url(__FILE__) . 'js/custom-ajax.js', array('jquery'), $this->version, false);
wp_localize_script('handle-ajax-name', 'custom_ajax_vars', array(
'custom_ajax_url' => admin_url('admin-ajax.php')
));
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_ajax_script' );Trong đó:
- wp_enqueue_script: Dùng để đăng ký file JS sử dụng trong wordpress, mình đặt file trong thư mục js của plugin vì vậy mình đã sử dụng “plugin_dir_url(__FILE__)”. Nếu bạn ở functions.php thì có thể sử dụng “get_template_directory_uri() . ‘/path/to/custom-ajax.js”.
- wp_localize_script: Dùng để khai báo các giá trị trong file JS. Trong ví dụ này ItsmeIT sẽ khai báo 1 biến custom_ajax_url để cung cấp
actions URLcho sự kiện Ajax để sử dụng Ajax trong Wordpress thành công.
Note: Nếu bạn muốn đặt add_action trong construct() thì cần phải thêm $this.Ví dụ: add_action( ‘wp_enqueue_scripts’, array($this, ‘enqueue_custom_ajax_script’));
Bước 2: Tạo File JavaScript để viết code xử lý Ajax
Tiếp theo, trước đó chúng ta đã đăng ký file JS custom-ajax.js, bây giờ hãy tạo ra file này để viết mã gửi yêu cầu Ajax và xử lý kết quả.
(function ($) {
$(function () {
$('#my-button').click(function () {
$.ajax({
url: custom_ajax_vars.custom_ajax_url,
type: 'POST',
data: {
action: 'custom_ajax_callback',
param: 'value', // Tham số tùy chọn
},
success: function (response) {
// Xử lý kết quả thành công
console.log(response);
},
error: function (xhr, status, error) {
// Xử lý lỗi
console.log(xhr.responseText);
}
});
});
});
})(jQuery);Trong đó:
- url: custom_ajax_vars.custom_ajax_url chúng ta đã khai báo ở bước 1, vì vậy trong file JS chúng ta có thể sử dụng nó. Nếu bạn muốn thêm các giá trị khác bạn chỉ cần khai báo tương tự như vậy.
- action: ‘custom_ajax_callback’: action này sẽ gọi đến hook được khai báo sử dụng wp_ajax mà ItsmeIT sẽ viết ở bước tiếp theo.
Bước 3: Đăng ký và xử lý yêu cầu Ajax
Tiếp theo, chúng ta cần đăng ký và xử lý yêu cầu Ajax trong WordPress.
// Đăng ký yêu cầu Ajax
add_action('wp_ajax_custom_ajax_callback', 'custom_ajax_handler');
add_action('wp_ajax_nopriv_custom_ajax_callback', 'custom_ajax_handler');
Giải thích:
- wp_ajax: Là khai báo sự kiện khi đã đăng nhập
- wp_ajax_nopriv: Là khai báo sự kiện khi chưa đăng nhập
- custom_ajax_callback: đặt cho nó 1 cái tên thích hợp và đảm bảo trong file JS bạn đã gọi action đến cái tên này.
- custom_ajax_handler: sẽ gọi đến function PHP. Nếu bạn khai báo add_action() trong construct() thì cần thêm “$this” ItsmeIT đã note ở bước 1.
Để có thể sử dụng Ajax trong Wordpress thì không thể thiếu mã PHP. Bây giờ tiếp tục viết function custom_ajax_handler() để xử lý khi ajax gửi request.
// Xử lý yêu cầu Ajax
function custom_ajax_handler() {
$response = [
'success' => 'errors',
'message' => 'message for errors'
];
// Xử lý yêu cầu Ajax ở đây
if (isset($_POST['param']) && $_POST['param']) {
// todo
$response = [
'success' => 'true',
'message' => 'message for success'
];
} else {
// todo
$response = [
'success' => 'false',
'message' => 'message for false'
];
}
// Kết thúc quá trình xử lý Ajax và trả về response
wp_send_json_success($response);
wp_die();
}Cách sửa lỗi 404 và 400 (Bad Request) trong Wordpress
Khi sử dụng Ajax trong WordPress, có thể xảy ra lỗi 404 hoặc 400 (Bad Request). Dưới đây là một số giải pháp để khắc phục các lỗi này:
- Lỗi 404: Thường xảy ra khi URL của yêu cầu Ajax không được định nghĩa đúng hoặc không tìm thấy. Đảm bảo rằng
urltrong yêu cầu Ajax trỏ đúng đến địa chỉ của file xử lý Ajax. Hãy xem lại cách ItsmeIT đã khai báo “wp_localize_script” và “ajax URL” ở bước 1 và bước 2.
- Lỗi 400 (Bad Request): Xảy ra khi dữ liệu gửi đi không hợp lệ hoặc không đáp ứng đúng với yêu cầu. Đảm bảo rằng dữ liệu gửi đi trong yêu cầu Ajax được định dạng đúng và trùng khớp với xử lý yêu cầu Ajax. Bạn có thể xem lại bước 3 khai báo “wp_ajax” và “wp_ajax_nopriv”.
Ngoài ra, có thể có các nguyên nhân khác gây ra lỗi này, ví dụ như lỗi trong quá trình xử lý yêu cầu Ajax hoặc xung đột với các plugin khác. Kiểm tra các bản ghi log hoặc thông báo lỗi để xem chi tiết về lỗi cụ thể và tìm giải pháp phù hợp.
Việc sử dụng Ajax trong WordPress giúp tạo ra chức năng cho trang web đáp ứng và tương tác nhanh chóng. Bằng cách tạo tệp JavaScript và đăng ký xử lý yêu cầu Ajax, chúng ta có thể tận dụng sức mạnh của công nghệ này.
– Advertising –
