admin-ajax.php. Trong bài đăng này, chúng tôi chỉ cho bạn cách sử dụng AJAX hiện đại trong WordPress bằng API REST. Cách này có thể áp dụng cho phiên bản WordPress 4. 7 trở lên. Phiên bản WordPress 4. 7, API REST khả dụng với sự trợ giúp của plugin. Tuy nhiên, sự phụ thuộc này là không mong muốn. Trong các phiên bản sau của WordPress, Điểm cuối nội dung API REST hiện là một phần của lõi WP.
AJAX là gì?
AJAX là viết tắt của Javascript và XML không đồng bộ nhưng ngày nay rất ít người sử dụng XML và nhiều JSON hơn. Tuy nhiên, nó vẫn được gọi là AJAX
.Yêu cầu HTTP bắt đầu khi một sự kiện xảy ra. Những sự kiện này có thể là nhấp chuột, di chuột, v.v. Yêu cầu này chuyển qua Internet đến máy chủ nơi nó xử lý và gửi phản hồi trở lại trình duyệt ban đầu. Trình duyệt xử lý dữ liệu mà nó nhận được và cập nhật trang với nội dung mới.
Cách sử dụng AJAX cũ
Trước tiên, hãy xem cách cũ bằng cách sử dụng admin-ajax.php. Đây chỉ đơn giản là để tham khảo và không nên được sử dụng.
Xếp hàng và bản địa hóa [các] tập lệnh
Phần lớn mã này có trong tệp_______2.
Mã trên rất phổ biến. Tôi đã xử lý tệp JavaScript bằng cách sử dụng hàm wp_enqueue_script . Bây giờ hãy tập trung vào chức năng wp_localize_script. Hàm này chấp nhận một mảng kết hợp và tạo một Đối tượng Javascript có thể được sử dụng ở bất kỳ đâu ở phía máy khách.
Nói cách khác, tôi đã sử dụng hàm wp_localize_script để tạo đối tượng javascript và đối tượng được sử dụng trong đường dẫn đến tệp js. js được đề cập trong dòng 6
Ví dụ: tôi có thể sử dụng nó như myObj.ajaxurlormyObj.nonce
Ở dòng 9, function admin_url[‘admin-ajax.php’]tự động tạo 'ajaxurl' và trả về đường dẫn đầy đủ tới tệp PHP cho AJAX.
Ở dòng 10, chức năng wp_create_nonce ['my-nonce'] tự động tạo một khóa sê-ri hoặc mã thông báo nonce mà chúng tôi sẽ sử dụng cho .
Sử dụng một cuộc gọi jQuery
Lưu ý rằng đây vẫn là cách cũ để làm điều này. Tập trung vào đường dẫn đến tệp js. js chứa mã được hiển thị bên dưới. Bất kỳ hành động nào như nhấp chuột, cuộn, thay đổi đầu vào, v.v. sẽ kích hoạt mã này
Có nhiều cách khác nhau để bắt đầu một yêu cầu AJAX trong jQuery
- $. ajax[]
- $. được[]
- $. bưu kiện[]
Ở dòng số 4 và 9, myObj.ajaxurlandmyObj.nonceđược lấy từ dòng 7 trong hình 1.
Dữ liệu ở dòng số 6 có ba thuộc tính. Dữ liệu mà chúng ta sẽ sử dụng trong chức năng gọi lại. Dữ liệu này có thể là một giá trị được chọn, một giá trị đầu vào, toàn bộ biểu mẫu, v.v.
Thứ hai là hành động chúng tôi sẽ thực hiện và tài liệu tham khảo của nó. Cái cuối cùng là nonce có thể là tên tùy chỉnh
Sau khi nhận được dữ liệu, bạn có thể tự do sử dụng DOM theo cách bạn muốn.
Bây giờ, hãy nắm bắt yêu cầu này vớiwp_ajaxAPI
Quy ước đặt tên hook và hàm phải ở định dạng_______9. Ví dụ: hàm admin-ajax.php0. Như thể hiện trong dòng 8 của hình 2, thuộc tính hành động này là bắt buộc và quan trọng trong đối tượng dữ liệu trong tệp javascript.
Tôi đã viết hook và hàm gọi lại để trả về dữ liệu đã xử lý trong PHP như trong hình 3.
Nhắc lại rằng đây là phương pháp gọi AJAX cũ và hiện không được khuyến nghị.
Cách mới của AJAX
Bây giờ, hãy xem cách hiện đại của AJAX trong WordPress bằng API REST
Xếp hàng và bản địa hóa [các] tập lệnh
Hình trên không khác lắm so với hình 1, ngoại trừ dòng số 7 và 8. Chúng tôi sử dụng cùng một câu móc, hành động vàadmin-ajax.php1. Tuy nhiên, trong trường hợp này, chúng ta đang chuyển các giá trị khác nhau trong hàmadmin-ajax.php2so với giá trị trước đó.
Ở đây, tôi đã sử dụng hàm rest_url[] để tự động lấy URL còn lại cho trường hợp cụ thể này.
Chúng tôi cũng nhận được nonce cụ thể cho trường hợp cụ thể này bằng cách_______03
Theo cách cũ, bạn có thể chỉ định tên tùy chỉnh cho nonce. Tuy nhiên, bây giờ nó phải được viết là ‘admin-ajax.php4’.
Cách gọi jQuery mới
Ở dòng 3 trong hình trên, URL của chúng ta khác. Giờ đây, nó là sự kết hợp củaadmin-ajax.php5và điểm cuối mà chúng tôi đã tạo và đăng ký với API còn lại. Truy vấn đến điểm cuối này thay vì đến ______0.
Tại dòng số 5, chúng tôi đưa yêu cầu tiêu đề vào định dạng khóa-giá trị. admin-ajax.php7là khóa vàadmin-ajax.php8là giá trị. Điều này cho phép chúng tôi linh hoạt để không xử lý nonce trong chức năng gọi lại. API còn lại bây giờ sẽ xác minh nonce.
Trong phần dữ liệu, bạn có thể chuyển bao nhiêu dữ liệu hiện có ở định dạng khóa-giá trị
Sau khi nhận được dữ liệu, bạn có thể tự do sử dụng DOM theo cách bạn muốn
PHP sử dụng điểm cuối API REST
Trong sơ đồ trên từ số dòng, 2 đến 7, hãy hiển thị phần bổ sung của móc rest_api_init. Điều này cho phép chúng tôi đăng ký điểm cuối phần còn lại tùy chỉnh của chúng tôi.
Hàm register_rest_route có ba tham số baseUrl, điểm cuối và mảng với hai thuộc tính phương thức và một lệnh gọi lại. Cuộc gọi lại chứa tên của chức năng gọi lại.