Sử dụng AJAX trong WordPress có thể hơi khó hiểu. Heck, sử dụng AJAX nói chung có thể hơi khó hiểu
“Được rồi, vậy Ajax sẽ gọi lại cho tôi chứ?
Đùa sang một bên, tôi thực sự đã gặp khó khăn một chút khi tìm hiểu cách AJAX hoạt động trong khuôn khổ WordPress
Sau đó, tôi đọc bài đăng của Devin Price có tiêu đề Ví dụ về Ajax đơn giản và tất cả các đèn bắt đầu nhấp nháy. Eureka
Đến cuối hướng dẫn này, bạn sẽ thực hiện các cuộc gọi WordPress AJAX như một nhà vô địch
Bắt đầu nào…
chương
1
2
3
4
5
Video AJAX WordPress
Chương 1
AJAX là gì?
AJAX là viết tắt của “Javascript và XML không đồng bộ”
Được rồi, điều đó có nghĩa là gì?
Điều đó có nghĩa là AJAX không thực sự là một ngôn ngữ lập trình
AJAX là một khung hoặc khái niệm mà bạn có thể sử dụng để yêu cầu máy chủ phụ trợ thực hiện điều gì đó từ giao diện người dùng của trang web mà không cần tải lại trang
Tuyệt đúng không
Gửi và nhận dữ liệu
Gửi và nhận dữ liệu từ cơ sở dữ liệu phụ trợ hoặc máy chủ là một công cụ siêu hữu ích và AJAX thực hiện việc này mà không gây khó chịu cho người dùng bằng cách tải lại trang
Đây được gọi là Hàm gọi lại
Một cách hay để nghĩ về nó là người dùng thực hiện cuộc gọi và máy chủ gọi lại cho họ
Có vô số trang web trên web sử dụng AJAX nhưng dưới đây là một số ví dụ mà bạn chắc chắn đã xem qua
Google Đề xuất
Đây có lẽ là thứ bạn sử dụng hàng ngày
Google Đề xuất hoặc tự động hoàn thành là chức năng của công cụ tìm kiếm Google cung cấp đề xuất cho người dùng khi họ đang nhập vào hộp tìm kiếm
Có thể bạn đã biết hoặc chưa biết điều này nhưng đó là AJAX gửi dữ liệu đến và từ máy chủ để đọc suy nghĩ của bạn và tự động hoàn thành câu của bạn
Được rồi, đó chỉ là chiếc quần cực kỳ lạ mắt
Gmail
Bạn có bao giờ nhận thấy rằng khi bạn nhấp vào trong Gmail, trang không tải lại không?
Đó là AJAX
Google đã thông qua AJAX cho Gmail vào năm 2004 và đó là một trong những lý do khiến ứng dụng email này gây bão trên toàn thế giới
Đó là một tính năng giúp ứng dụng email trở nên siêu liền mạch và mượt mà
Được rồi, bây giờ chúng ta đã hiểu cơ bản về AJAX là gì, hãy đi sâu vào tìm hiểu cách thực hiện cuộc gọi AJAX với WordPress
chương 2
Bắt đầu học AJAX
Thực hiện cuộc gọi WordPress AJAX hơi khác một chút so với cách bạn thực hiện chỉ với PHP và Javascript
AJAX thực sự được tích hợp vào khuôn khổ WordPress. Điều này có rất nhiều lợi thế, nhưng bạn phải sử dụng nó theo cách được mô tả trong codex
https. // codex. báo chí. org/AJAX_in_Plugins
Tôi yêu thích codex WordPress đến mức đôi khi tôi thấy rằng những lời giải thích trong đó được viết với giả định rằng bạn đã hiểu mọi thứ về WordPress
Chà, tôi nói “boooooo” với các ví dụ mã khó hiểu
3 bước đơn giản
Tôi đã chia phần này thành 3 bước siêu dễ thực hiện
Hãy bắt đầu thực hiện cuộc gọi WordPress AJAX đầu tiên của bạn…
Bước 1
Sử dụng nút bên dưới để tải xuống toàn bộ tệp Hướng dẫn & Tệp Ví dụ PDF
Hoặc bạn có thể sử dụng hai đoạn mã bên dưới
Javascript [Cuộc gọi]
// This would normally be enqueued as a file, but for the sake of ease we will just print to the footer
function add_this_script_footer[]{ ?>
PHP [Gọi lại]
function example_ajax_request[] {
// The $_REQUEST contains all the data sent via AJAX from the Javascript call
if [ isset[$_REQUEST] ] {
$fruit = $_REQUEST['fruit'];
// This bit is going to process our fruit variable into an Apple
if [ $fruit == 'Banana' ] {
$fruit = 'Apple';
}
// Now let's return the result to the Javascript function [The Callback]
echo $fruit;
}
// Always die in functions echoing AJAX content
die[];
}
// This bit is a special action hook that works with the WordPress AJAX functionality.
add_action[ 'wp_ajax_example_ajax_request', 'example_ajax_request' ];
Bước 2
Sao chép và dán nội dung tệp đã tải xuống hoặc các phần mã ở trên vào chức năng chủ đề WordPress của bạn. tập tin php
Bước 3
Đăng nhập vào WordPress và bạn sẽ thấy một cửa sổ bật lên có nội dung “Apple”
Đó là nó. Bạn vừa thực hiện cuộc gọi WordPress AJAX đầu tiên của mình
Chương 3
Sự phá vỡ
Được rồi, thật tuyệt khi xem cửa sổ bật lên nhỏ nói “Apple”, nhưng cái quái gì vừa xảy ra ở đó vậy?
Chúng ta biết rằng biến trái cây trong Javascript được coi là “Banana”, phải không?
Tại một số điểm, mã đã thực hiện một động tác tung hứng lạ mắt và thay đổi biến trái cây từ “Chuối” thành “Táo”
Hãy chia nhỏ những gì đã xảy ra trong mã theo từng bước
Phá vỡ nó xuống
- Khi bạn đăng nhập vào khu vực quản trị, WordPress đã tải Javascript ở chân trang và tập lệnh được thực thi
- Javascript sau đó đã tạo một biến có tên là fruit tương đương với “Banana”
- Sau đó, nó đã gửi biến trái cây tới ajaxurl của WordPress [admin-ajax. php] và yêu cầu nó chạy hàm PHP “example_ajax_request” ở trên mà bạn đã tạo trong hàm của mình. php
- Sau đó, biến fruit được chuyển đến hàm PHP “example_ajax_request” và được xử lý, kết quả là “Apple”
- PHP sau đó thực hiện gọi lại Javascript với kết quả
- Cuối cùng, Javascript đã nhận được cuộc gọi lại và hiển thị kết quả trong cảnh báo cửa sổ
Tôi đã đưa ra một loạt nhận xét trong đoạn mã trên và trong tệp ví dụ nữa. Điều này sẽ giúp hiểu rõ hơn về quy trình
Chương 4
Móc WP AJAX
Một cái gì đó tôi muốn chỉ ra là hook hành động cho hàm PHP trong mã chúng ta vừa sử dụng
WordPress sử dụng một thứ gọi là hook cho phép bạn kích hoạt một số mã tại một thời điểm cụ thể trong khi tải trang
Khi sử dụng AJAX trong khuôn khổ WordPress, có một cái móc đặc biệt
Móc “wp_ajax” cho khu vực quản trị và “wp_ajax_nopriv” cho giao diện trang web của bạn
Gửi và nhận dữ liệu
________số 8_______
Bạn sẽ nhận thấy rằng tên của chức năng “example_ajax_request” được bao gồm trong hook. Đây là một cách thực hành tốt để nhắc nhở bản thân hook “wp_ajax_” nào đi với chức năng nào
Móc phải có một cái gì đó sau wp_ajax_ để làm cho nó trở nên độc đáo, vì vậy, quy ước đặt tên tốt là chỉ cần thêm tên hàm mà bạn đang gọi
Ví dụ trên sẽ chỉ hoạt động trong khu vực quản trị. Nếu bạn muốn sử dụng AJAX ở giao diện người dùng, bạn sẽ phải thêm một hook hành động bổ sung vào mã PHP của mình
add_action[ 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' ];
Bạn cũng sẽ phải đảm bảo Javascript tải ở giao diện người dùng và ajaxurl được xác định
Đừng lo lắng, tôi sẽ chỉ cho bạn chính xác cách thực hiện việc này trong phần tiếp theo
Chương 5
Giao diện AJAX của WordPress
Bây giờ chúng ta đã hiểu khái niệm sử dụng AJAX với WordPress, hãy thử tạo một Hàm gọi lại AJAX trên giao diện người dùng của WordPress
Tôi biết rằng tất cả điều này có vẻ hơi quá sức nếu bạn chưa từng làm việc với AJAX nhưng tôi hứa điều này sẽ dễ dàng
Chỉ có một vài bước bổ sung mà tôi cần chỉ cho bạn
Hãy đi sâu vào
Cuộc gọi AJAX giao diện người dùng
Đối với phần này, tôi đã chia nó thành 4 bước siêu dễ thực hiện
Bước 1
Sử dụng nút bên dưới để tải xuống toàn bộ tệp Hướng dẫn & Tệp Ví dụ PDF
Hoặc bạn có thể sử dụng hai đoạn mã bên dưới
var ajaxurl = "' . admin_url['admin-ajax.php'] . '";
';
}
add_action['wp_head', 'myplugin_ajaxurl'];
//The Javascript
function add_this_script_footer[]{ ?>
Bước 2
Sao chép và dán nội dung tệp đã tải xuống hoặc các phần mã ở trên vào cuối chức năng chủ đề WordPress của bạn. tập tin php
Bước 3
Tạo một trang trên trang web của bạn và dán mã liên kết bên dưới vào trang.
Bước 4
Đi đến trang và nhấp vào liên kết. kablamo. Liên kết Banana của chúng tôi đã chuyển thành liên kết Apple. Đó là một số phép thuật AJAX theo cách của bạn
AJAX Frontend Magic Breakdown
Có một vài đoạn mã bổ sung mà chúng tôi phải thêm vào để thực hiện lệnh gọi AJAX trên giao diện người dùng
Hãy chia nhỏ công việc kinh doanh đó cho bạn
1. Chúng tôi phải đảm bảo rằng jQuery đang được tải để mã bên dưới đảm nhiệm việc đó cho chúng tôi
//Load jQuery
wp_enqueue_script['jquery'];
2. Không giống như trong bảng điều khiển quản trị viên WordPress, chúng tôi phải đảm bảo rằng chúng tôi đã đặt biến xác định url. một phần của chức năng gọi lại AJAX của chúng tôi. Bit này xác định biến đó ajaxurl
//Define AJAX URL
function myplugin_ajaxurl[] {
echo '';
}
add_action['wp_head', 'myplugin_ajaxurl'];
Rất cám ơn RT trên WordPress StackExchange về mã tuyệt vời để xác định ajaxurl
3. Mã Javascript bên dưới về cơ bản giống với mã chúng tôi đã sử dụng để thực hiện cuộc gọi AJAX trong bảng điều khiển quản trị viên WordPress. Các thay đổi duy nhất là thay vì thực hiện cuộc gọi ngay khi chúng tôi tải trang, chúng tôi sẽ thực hiện cuộc gọi AJAX khi chúng tôi nhấp vào liên kết. Dưới đây chúng tôi đang nói rằng khi chúng tôi nhấp vào liên kết có chuối lớp CSS, kích hoạt lệnh gọi AJAX của chúng tôi
//The Javascript
function add_this_script_footer[]{ ?>
Ngoài ra, bạn sẽ nhận thấy hook cho chức năng này là wp_footer thay vì in_admin_footer
4. Mã PHP cũng gần giống với mã của chúng tôi mà chúng tôi đã sử dụng để thực hiện cuộc gọi AJAX trong bảng điều khiển quản trị viên WordPress. Thay đổi duy nhất ở đây là chúng tôi đã thêm hook hành động WordPress đặc biệt cho phép người dùng giao diện người dùng truy cập mã này
//The PHP
function example_ajax_request[] {
// The $_REQUEST contains all the data sent via AJAX from the Javascript call
if [ isset[$_REQUEST] ] {
$fruit = $_REQUEST['fruit'];
// This bit is going to process our fruit variable into an Apple
if [ $fruit == 'Banana' ] {
$fruit = 'Apple';
}
// Now let's return the result to the Javascript function [The Callback]
echo $fruit;
}
// Always die in functions echoing AJAX content
die[];
}
// This bit is a special action hook that works with the WordPress AJAX functionality.
add_action[ 'wp_ajax_example_ajax_request', 'example_ajax_request' ];
add_action[ 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' ];
5. Khi bạn nhấp vào liên kết mà bạn đã thêm vào trang giao diện người dùng của mình, nó sẽ gửi yêu cầu tới mã PHP trong hàm của bạn. php thông qua Javascript và mã đã xử lý Banana và gửi lại cho Apple
Khi nó đến trang, javascript đã sử dụng $. text[] hàm jQuery và thay đổi liên kết Banana thành Apple
Đồ tốt
Có một số suy nghĩ?
Vui lòng để lại một bình luận ở dưới
Tôi đã học được rất nhiều về cách thực hiện cuộc gọi WordPress AJAX từ việc thực hiện hướng dẫn này và tôi hy vọng bạn cũng học được nhiều điều