Làm cách nào để gọi một hàm bằng Ajax trong WordPress?

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

1. 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
2. Javascript sau đó đã tạo một biến có tên là fruit tương đương với “Banana”
3. 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
4. Sau đó, biến fruit được chuyển đến hàm PHP “example_ajax_request” và được xử lý, kết quả là “Apple”
5. PHP sau đó thực hiện gọi lại Javascript với kết quả
6. 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

				
					
Banana
 
				
			

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