Cuộc gọi ajax tùy chỉnh trong wordpress

Wordpress làm cho việc sử dụng ajax trong khu vực quản trị viên và giao diện người dùng trở nên dễ dàng vì ajax được tích hợp vào lõi WordPress

Hãy xem ví dụ ngắn về điều này

  1. Không có tệp javascript riêng
  2. Với tệp javascript riêng

Bạn có thể tạo một tệp trong plugin của mình HOẶC bạn có thể sử dụng các chức năng của chủ đề của mình. tập tin php cho cái này

1. Không có tệp javascript riêng

Có một hook hành động gọi là admin_footer, sử dụng nó chúng ta có thể nhúng mã javascript vào khu vực chân trang của quản trị viên

  1. tạo một yêu cầu ajax từ javascript và chuyển biến hành động dưới dạng dữ liệu

  2. Wordpress sử dụng móc hành động wp_ajax_ để phát hiện tất cả các yêu cầu ajax đến từ quản trị viên hoặc khu vực giao diện người dùng. Bạn cần chỉ định đây là tiền tố với tên hành động của mình như thế này wp_ajax_your_action_name. Xem ví dụ dưới đây cho điều này

    Bài viết này, dành cho các nhà phát triển plugin, mô tả cách thêm Ajax vào plugin. Trước khi đọc bài viết này, bạn nên làm quen với những điều sau đây

    • Ajax - Tổng quan về công nghệ
    • Viết Plugin - Cách viết plugin
    • Plugin API - Bộ lọc và hành động - chúng là gì và cách sử dụng chúng
    • Cách thêm HTML vào trang, bài đăng hoặc màn hình WordPress thích hợp -- ví dụ: nếu bạn muốn thêm Ajax vào màn hình quản trị mà bạn tạo, bạn sẽ cần hiểu cách thêm menu quản trị vào WordPress; . Bài viết này không bao gồm các chủ đề này

    Ajax về phía quản trị

    Vì Ajax đã được tích hợp vào màn hình quản trị cốt lõi của WordPress nên việc thêm nhiều chức năng Ajax phía quản trị hơn vào plugin của bạn khá đơn giản

    Ví dụ ngắn này sử dụng PHP để viết JavaScript của chúng tôi ở cuối trang. Tập lệnh này sau đó sẽ kích hoạt yêu cầu AJAX khi trang được tải đầy đủ

    
    	 
    

    NOTE: Since Version 2.8, The JavaScript global variable ajaxurl can be used in case you want to separate your JavaScript code from php files into JavaScript only files. This is true on the administration side only. If you are using AJAX on the front-end, you need to make your JavaScript aware of the admin-ajax.php url. A best practice is documented in the fourth example, below using wp_localize_script().

    Then, set up a PHP function to handle the AJAX request.

    Notice how the 'action' key's value 'my_action', defined in our JavaScript above, matches the latter half of the action 'wp_ajax_my_action' in our AJAX handler below. This is because it is used to call the server side PHP function through admin-ajax.php. If an action is not specified, admin-ajax.php will exit, and return 0 in the process.

    You will need to add a few details, such as error checking and verifying that the request came from the right place ( using check_ajax_referer() ), but hopefully the example above will be enough to get you started on your own administration-side Ajax plugin.

    Notice the use of wp_die(), instead of die() or exit(). Most of the time you should be using wp_die() in your Ajax callback function. This provides better integration with WordPress and makes it easier to test your code.

    Separate JavaScript File

    The same example as the previous one, except with the JavaScript on a separate external file we'll call js/my_query.js. The examples are relative to a plugin folder.

    jQuery(document).ready(function($) {
    	var data = {
    		'action': 'my_action',
    		'whatever': ajax_object.we_value      // We pass php values differently!
    	};
    	// We can also pass the url value separately from ajaxurl for front end AJAX implementations
    	jQuery.post(ajax_object.ajax_url, data, function(response) {
    		alert('Got this from the server: ' + response);
    	});
    });
    

    Với các tệp JavaScript bên ngoài, trước tiên chúng ta phải wp_enqueue_script() để chúng được đưa vào trang. Ngoài ra, chúng ta phải sử dụng wp_localize_script() để chuyển các giá trị vào các thuộc tính đối tượng JavaScript, vì PHP không thể trực tiếp các giá trị

     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    
    4 vào tệp JavaScript của chúng ta. Hàm xử lý giống như ví dụ trước.

     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    

    Ajax về phía người xem

    Kể từ WordPress 2. 8, có một hook tương tự như wp_ajax_(action).

    Vì vậy, nếu bạn muốn nó kích hoạt ở giao diện người dùng cho cả khách truy cập và người dùng đã đăng nhập, bạn có thể thực hiện việc này.

    add_action( 'wp_ajax_my_action', 'my_action' );
    add_action( 'wp_ajax_nopriv_my_action', 'my_action' );
    

    lưu ý 1. Không giống như phía quản trị viên, toàn cầu javascript của

     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    
    5 không được xác định tự động cho bạn, trừ khi bạn đã cài đặt BuddyPress hoặc plugin phụ thuộc vào Ajax khác. Vì vậy, thay vì dựa vào một biến javascript toàn cầu, hãy khai báo một đối tượng không gian tên javascript với thuộc tính riêng của nó,
     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    
    5. Bạn cũng có thể sử dụng wp_localize_script() để cung cấp URL cho tập lệnh của mình và tạo URL bằng cách sử dụng biểu thức này.
     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    
    7

    Lưu ý 2. Cả hai yêu cầu Ajax phía trước và phía sau đều sử dụng admin-ajax. php nên is_admin() sẽ luôn trả về true trong mã xử lý hành động của bạn. Khi tải có chọn lọc trình xử lý tập lệnh Ajax của bạn cho giao diện người dùng và giao diện người dùng, đồng thời sử dụng hàm is_admin(), các hook wp_ajax_(action) và wp_ajax_nopriv_(action) của bạn PHẢI nằm trong phần is_admin() === true.

    Các yêu cầu Ajax bị ràng buộc với các hành động wp_ajax_ hoặc wp_ajax_nopriv_ được thực thi trong bối cảnh Quản trị viên WP. Xem xét cẩn thận các hành động bạn đang thực hiện trong mã của mình vì người dùng hoặc khách truy cập không có đặc quyền sẽ có thể kích hoạt các yêu cầu có quyền nâng cao mà họ có thể không được phép thực hiện.

    if ( is_admin() ) {
        add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' );
        add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action' );
        add_action( 'wp_ajax_my_backend_action', 'my_backend_action' );
        // Add other back-end action hooks here
    } else {
        // Add non-Ajax front-end action hooks here
    }
    

    Ở đây, hành động Ajax my_frontend_action sẽ kích hoạt hàm PHP my_frontend_action_callback() cho tất cả người dùng. Hành động Ajax my_backend_action sẽ kích hoạt hàm PHP my_backend_action_callback() chỉ dành cho người dùng đã đăng nhập.

    Sự kiện JavaScript sau tải

    Plugin và chủ đề chèn nội dung qua Ajax phải kích hoạt sự kiện

     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    
    0 trên
     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    
    1 sau khi nội dung được chèn. Các tập lệnh khác phụ thuộc vào tương tác JavaScript sau khi chèn nội dung, chẳng hạn như AddToAny hoặc tập lệnh jQuery Masonry, hãy lắng nghe sự kiện
     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    
    0 để khởi tạo JavaScript cần thiết của chúng. Ví dụ: khi sự kiện
     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    
    0 được kích hoạt từ Infinite Scroll của Jetpack, AddToAny sẽ hiển thị các nút chia sẻ cho mỗi bài đăng và jQuery Masonry định vị các thành phần trên trang.

    JavaScript kích hoạt sự kiện

     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    
    0 sau khi nội dung đã được chèn qua Ajax.

    jQuery( document.body ).trigger( 'post-load' );
    

    JavaScript lắng nghe sự kiện

     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    
    0.

     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    
    1

    Lưu ý về jQuery. Cẩn thận khi sử dụng phương thức

     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    
    6 của jQuery với biểu thức bộ chọn để chèn nội dung vì nó sẽ gây ra
     admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    }
    
    // Same handler function...
    add_action( 'wp_ajax_my_action', 'my_action' );
    function my_action() {
    	global $wpdb;
    	$whatever = intval( $_POST['whatever'] );
    	$whatever += 10;
            echo $whatever;
    	wp_die();
    }
    
    7

    Làm cách nào để thực hiện cuộc gọi AJAX trong WordPress?

    Khi bạn định thực hiện cuộc gọi Ajax, bạn cần phải gửi yêu cầu tới quản trị viên-ajax. tệp php , là một phần của lõi WordPress. Tệp này chịu trách nhiệm xử lý và xử lý tất cả các yêu cầu Ajax của bạn trong bối cảnh WordPress. KHÔNG sử dụng URL trực tiếp của đường dẫn tệp.

    Chúng tôi có thể sử dụng AJAX trong WordPress không?

    WordPress hỗ trợ AJAX nguyên bản . Bạn có thể thấy “admin-ajax. php” bên trong thư mục wp-admin. Ban đầu, nó được tạo cho tất cả các chức năng tạo yêu cầu AJAX từ quản trị viên WordPress.

    Làm cách nào để gọi AJAX trên giao diện người dùng của WordPress?

    Các hook hành động wp_ajax_ và wp_ajax_nopriv_ được sử dụng để thực hiện lệnh gọi ajax từ giao diện người dùng wordpress . wp_ajax_ được sử dụng khi người dùng đăng nhập vào trang web. wp_ajax_nopriv_ được sử dụng khi người dùng đăng xuất khỏi trang web.

    Cách sử dụng quản trị viên

    Vì lõi WordPress đã sử dụng Ajax để tăng sức mạnh cho các tính năng phụ trợ khác nhau của nó nên bạn có thể sử dụng các chức năng tương tự để sử dụng Ajax trên WordPress. Tất cả những gì bạn cần làm là đăng ký một hành động, trỏ hành động đó đến trang web của bạn quản trị-ajax. tệp php và xác định cách bạn muốn nó trả về giá trị .