Làm thế nào để bạn gọi ajax từ một chủ đề wordpress?

AJAX là viết tắt của JavaScript và XML không đồng bộ. AJAX là sự kết hợp của web script và công nghệ cho phép cập nhật trang web mà không cần tải lại toàn bộ trang

Trong WordPress, bạn có thể thấy AJAX đang hoạt động trong màn hình chỉnh sửa bài đăng, nơi bạn có thể thêm danh mục mới trong khi viết bài đăng mà không cần tải lại trang. Nó cũng được sử dụng trên trang nhận xét, nơi bạn có thể phê duyệt hoặc xóa nhận xét mà không cần tải lại trang

AJAX trong WordPress là gì?

AJAX là sự kết hợp giữa tập lệnh và công nghệ

“A” là viết tắt của “không đồng bộ”, có nghĩa là thông tin trên trang không tải cùng một lúc. Trên thực tế, điều đó có nghĩa là toàn bộ trang web không cần làm mới khi chỉ một lượng nhỏ nội dung trên trang cập nhật

Chữ “J” trong AJAX là viết tắt của JavaScript. JavaScript là một phần quan trọng của quá trình cập nhật không đồng bộ, vì nó được sử dụng để thêm nội dung động vào trang web

Cuối cùng, chữ “X” trong AJAX là dành cho XML. XML là một ngôn ngữ đánh dấu tương tự như HTML. Nó cho phép bạn lưu trữ dữ liệu ở định dạng không dựa vào bất kỳ phần mềm hoặc hệ thống cụ thể nào để xử lý dữ liệu đó

Đó là những gì AJAX đại diện, nhưng nó thực sự không giới hạn ở những công nghệ đó

AJAX đã phát triển kể từ khi nó được tạo ra lần đầu tiên. Mặc dù “X” trong Ajax là viết tắt của XML, một số ứng dụng hiện sử dụng JSON (Ký hiệu đối tượng JavaScript) thay thế cho XML

Trong WordPress, AJAX được sử dụng bởi lõi WordPress và nó cũng có thể được sử dụng bởi các plugin

Ví dụ: AJAX có thể được sử dụng trong WordPress để gửi biểu mẫu liên hệ mà không cần tải lại trang

Ưu điểm của AJAX là gì?

AJAX có nhiều ưu điểm, đó là lý do tại sao nó được sử dụng rộng rãi trong lõi, chủ đề và plugin của WordPress

Các kỹ thuật chúng tôi đã đề cập ở trên giúp làm cho các trang web WordPress nhanh hơn

AJAX cho phép khách truy cập của bạn thấy các thay đổi ngay lập tức, thay vì liên tục bị gián đoạn bởi việc làm mới trang

AJAX chỉ gửi dữ liệu cần thiết qua lại tới máy chủ, do đó, nó tối đa hóa băng thông lưu trữ của bạn và tránh truyền dữ liệu lớn hơn

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu tất cả về AJAX và cách thức hoạt động của nó. Kiểm tra bài đọc bổ sung dưới đây để tìm hiểu thêm

Bạn cũng có thể đăng ký kênh YouTube của chúng tôi để xem các video hướng dẫn từng bước về WordPress và theo dõi chúng tôi trên Twitter và Facebook để nhận các bản cập nhật mới nhất

Xin chào, tôi là Daniel và tôi làm mọi thứ cho web. Tôi là CTO tại Kinsta và tôi viết cho một số ấn phẩm tuyệt vời như Tạp chí Smashing và … Thông tin thêm về Daniel ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về front-end & UX
Được hơn 200.000 người tin cậy

• Giao diện người dùng SmashingConf 2023

• Nguyên tắc chung về kiểu chữ với Elliot Jay Stocks

• Các mẫu thiết kế giao diện Đào tạo UX

• Chuẩn bị cho các vai trò giao tiếp ngày nay Thạc sĩ Thiết kế Thông tin của Northwestern

• Quảng cáo trên tạp chí Smashing

Trong vài năm gần đây, AJAX đã len lỏi vào các trang web và dần trở thành CÁCH để tạo các trang web năng động, thân thiện với người dùng và phản hồi nhanh. AJAX là công nghệ cho phép bạn cập nhật nội dung của một trang mà không cần phải tải lại nó trong trình duyệt. Ví dụ: Google Tài liệu sử dụng công nghệ này khi lưu công việc của bạn cứ sau vài phút. Bài viết này đã được duyệt và cập nhật vào ngày 14 tháng 7 năm 2017

Mặc dù có một số cách để sử dụng AJAX trong WordPress — và tất cả đều “đúng”, theo nghĩa lỏng lẻo của từ này — có một phương pháp mà bạn nên làm theo vì một vài lý do. WordPress hỗ trợ nó, nó là minh chứng cho tương lai, nó rất hợp lý và nó cung cấp cho bạn nhiều tùy chọn ngay lập tức

Đọc thêm trên SmashingMag.

• Thuật ngữ chuyên ngành và thuật ngữ web trong ngành thiết kế web
• Tại sao AJAX không đủ
• Cách trở thành nhà phát triển WordPress hàng đầu
• Hướng dẫn cho người mới bắt đầu để tạo một trang web WordPress
  

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Nâng cao kỹ năng UX của bạn với Mẫu thiết kế giao diện thông minh, thư viện video 9 giờ của Vitaly Friedman. Với hàng trăm ví dụ thực tế, hướng dẫn thiết kế và đào tạo UX trực tiếp thân thiện. Kiểm tra bản xem trước miễn phí

Chuyển đến khóa học video UX ↬

AJAX là gì?

AJAX là sự kết hợp của mã HTML, CSS và JavaScript cho phép bạn gửi dữ liệu tới tập lệnh, sau đó nhận và xử lý phản hồi của tập lệnh mà không cần tải lại trang

Nếu bạn chưa quen với AJAX, tôi khuyên bạn nên tiếp tục đọc đến cuối bài viết này và sau đó đọc bài viết trên Wikipedia về AJAX, sau đó là một số hướng dẫn về AJAX. Đây là một trường hợp hiếm hoi khi tôi khuyên bạn nên đọc càng ít về nó càng tốt trước khi dùng thử, bởi vì lúc đầu nó khiến tôi bối rối;

Nếu bạn đang tạo một trang trên trang web của mình, nơi người dùng có thể sửa đổi hồ sơ của họ, bạn có thể sử dụng AJAX để cập nhật hồ sơ của người dùng mà không cần phải liên tục tải lại trang bất cứ khi nào họ gửi biểu mẫu. Khi người dùng nhấp vào nút, dữ liệu họ đã nhập vào biểu mẫu sẽ được gửi qua AJAX tới tập lệnh xử lý, tập lệnh này sẽ lưu dữ liệu và trả về chuỗi “đã lưu dữ liệu. ” Sau đó, bạn có thể xuất dữ liệu đó cho người dùng bằng cách chèn dữ liệu đó vào trang

Điều cần nắm bắt về AJAX là nó khác với những gì bạn đang làm như thế nào. Nếu bạn có biểu mẫu liên hệ, rất có thể biểu mẫu đó được đánh dấu bằng HTML, một số kiểu được áp dụng cho biểu mẫu đó và tập lệnh PHP xử lý thông tin. Sự khác biệt duy nhất giữa điều này và AJAX là cách thông tin mà người dùng nhập vào tập lệnh và quay lại người dùng — mọi thứ khác đều giống nhau

Để khai thác hết tiềm năng của AJAX và tận dụng tối đa bài viết này, bạn cần phải làm quen với JavaScript (jQuery là đủ), cũng như HTML, CSS và PHP. Nếu kiến ​​thức về JavaScript của bạn hơi kém, đừng lo lắng; . Nếu bạn cần một tay, chỉ cần gửi bình luận và tôi sẽ cố gắng giúp đỡ

Làm thế nào để không sử dụng AJAX

Một phương pháp đã tồn tại và tôi đã sử dụng lại bản thân mình trong những ngày xưa tồi tệ, đó là chỉ cần tải tệp wp-load. php ở đầu tập lệnh PHP của bạn. Điều này cho phép bạn sử dụng các chức năng của WordPress, phát hiện người dùng hiện tại, v.v. Nhưng về cơ bản, đây là một vụ hack và vì vậy không phải là bằng chứng trong tương lai. Nó kém an toàn hơn nhiều và không cung cấp cho bạn một số tùy chọn thú vị mà hệ thống WordPress cung cấp

Cách AJAX hoạt động trong WordPress nguyên bản

Vì AJAX đã được sử dụng trong phần cuối của WordPress nên về cơ bản nó đã được triển khai cho bạn. Tất cả những gì bạn cần làm là sử dụng các chức năng có sẵn. Hãy xem xét quy trình nói chung trước khi đi sâu vào mã

Mọi yêu cầu AJAX đều đi qua quản trị viên-ajax. php trong thư mục wp-admin. Tệp này có tên là admin-ajax có thể hơi khó hiểu. Tôi hoàn toàn đồng ý, nhưng đây chỉ là cách quá trình phát triển diễn ra. Vì vậy, chúng ta nên sử dụng admin-ajax. php cho back-end và AJAX hướng tới người dùng

Mỗi yêu cầu cần cung cấp ít nhất một phần dữ liệu (sử dụng phương pháp GET hoặc POST) được gọi là action. Dựa trên hành động này, mã trong admin-ajax. php tạo hai hook, wp_ajax_my_action và wp_ajax_nopriv_my_action, trong đó

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

function my_user_vote() {

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
      exit("No naughty business please");
   }   

   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
   $vote_count = ($vote_count == ’) ? 0 : $vote_count;
   $new_vote_count = $vote_count + 1;

   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);

   if($vote === false) {
      $result['type'] = "error";
      $result['vote_count'] = $vote_count;
   }
   else {
      $result['type'] = "success";
      $result['vote_count'] = $new_vote_count;
   }

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();

}

function my_must_login() {
   echo "You must log in to vote";
   die();
}

0 là giá trị của biến GET hoặc POST action

Thêm chức năng vào hook đầu tiên có nghĩa là chức năng đó sẽ kích hoạt nếu người dùng đã đăng nhập bắt đầu hành động. Sử dụng hook thứ hai, bạn có thể phục vụ riêng cho người dùng đã đăng xuất

Triển khai AJAX trong WordPress

Hãy xây dựng một hệ thống bỏ phiếu thô sơ làm ví dụ nhanh. Đầu tiên, tạo một plugin trống và kích hoạt nó. Nếu bạn cần trợ giúp về phần này, hãy xem hướng dẫn tạo plugin. Ngoài ra, hãy tìm đĩa đơn của chủ đề của bạn. php và mở nó

Chuẩn bị gửi cuộc gọi AJAX

Hãy tạo một liên kết cho phép mọi người đánh giá cao các bài viết của chúng ta. Nếu người dùng đã bật JavaScript, nó sẽ sử dụng JavaScript; . Một nơi nào đó trong đĩa đơn của bạn. php, có lẽ gần tiêu đề của bài viết, hãy thêm đoạn mã sau

ID, "votes", true);
   $votes = ($votes == "") ? 0 : $votes;
?>
This post has 
 votes


ID.'&nonce='.$nonce);
    echo 'vote for this article';
?>

Trước tiên, hãy kéo giá trị của khóa meta

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

function my_user_vote() {

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
      exit("No naughty business please");
   }   

   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
   $vote_count = ($vote_count == ’) ? 0 : $vote_count;
   $new_vote_count = $vote_count + 1;

   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);

   if($vote === false) {
      $result['type'] = "error";
      $result['vote_count'] = $vote_count;
   }
   else {
      $result['type'] = "success";
      $result['vote_count'] = $new_vote_count;
   }

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();

}

function my_must_login() {
   echo "You must log in to vote";
   die();
}

4 liên quan đến bài đăng này. Trường meta này là nơi chúng tôi sẽ lưu trữ tổng số phiếu bầu. Hãy đảm bảo rằng nếu nó không tồn tại (tôi. e. giá trị của nó là một chuỗi rỗng), chúng tôi hiển thị

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

function my_user_vote() {

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
      exit("No naughty business please");
   }   

   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
   $vote_count = ($vote_count == ’) ? 0 : $vote_count;
   $new_vote_count = $vote_count + 1;

   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);

   if($vote === false) {
      $result['type'] = "error";
      $result['vote_count'] = $vote_count;
   }
   else {
      $result['type'] = "success";
      $result['vote_count'] = $new_vote_count;
   }

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();

}

function my_must_login() {
   echo "You must log in to vote";
   die();
}

5

Chúng tôi cũng đã tạo một liên kết bình thường ở đây. Phần bổ sung duy nhất là một chút bảo mật, sử dụng nonces, để đảm bảo không có hành vi chơi xấu. Mặt khác, đây chỉ đơn giản là một liên kết trỏ đến admin-ajax. php, với hành động và ID của bài đăng mà người dùng đang đăng được chỉ định ở dạng chuỗi truy vấn

Để phục vụ cho người dùng JavaScript, chúng tôi đã thêm một lớp

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

function my_user_vote() {

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
      exit("No naughty business please");
   }   

   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
   $vote_count = ($vote_count == ’) ? 0 : $vote_count;
   $new_vote_count = $vote_count + 1;

   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);

   if($vote === false) {
      $result['type'] = "error";
      $result['vote_count'] = $vote_count;
   }
   else {
      $result['type'] = "success";
      $result['vote_count'] = $new_vote_count;
   }

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();

}

function my_must_login() {
   echo "You must log in to vote";
   die();
}

6, mà chúng tôi sẽ đính kèm một sự kiện nhấp chuột và một thuộc tính

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

function my_user_vote() {

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
      exit("No naughty business please");
   }   

   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
   $vote_count = ($vote_count == ’) ? 0 : $vote_count;
   $new_vote_count = $vote_count + 1;

   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);

   if($vote === false) {
      $result['type'] = "error";
      $result['vote_count'] = $vote_count;
   }
   else {
      $result['type'] = "success";
      $result['vote_count'] = $new_vote_count;
   }

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();

}

function my_must_login() {
   echo "You must log in to vote";
   die();
}

7, chứa ID của bài đăng. Chúng tôi sẽ sử dụng những thông tin này để chuyển thông tin cần thiết tới JavaScript của chúng tôi

Xử lý hành động không có JavaScript

Nếu bạn nhấp vào liên kết này ngay bây giờ, bạn sẽ được đưa đến trang quản trị-ajax. tập lệnh php, sẽ xuất ra

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

function my_user_vote() {

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
      exit("No naughty business please");
   }   

   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
   $vote_count = ($vote_count == ’) ? 0 : $vote_count;
   $new_vote_count = $vote_count + 1;

   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);

   if($vote === false) {
      $result['type'] = "error";
      $result['vote_count'] = $vote_count;
   }
   else {
      $result['type'] = "success";
      $result['vote_count'] = $new_vote_count;
   }

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();

}

function my_must_login() {
   echo "You must log in to vote";
   die();
}

8 hoặc

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

function my_user_vote() {

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
      exit("No naughty business please");
   }   

   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
   $vote_count = ($vote_count == ’) ? 0 : $vote_count;
   $new_vote_count = $vote_count + 1;

   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);

   if($vote === false) {
      $result['type'] = "error";
      $result['vote_count'] = $vote_count;
   }
   else {
      $result['type'] = "success";
      $result['vote_count'] = $new_vote_count;
   }

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();

}

function my_must_login() {
   echo "You must log in to vote";
   die();
}

5. Điều này là do chưa có chức năng nào được tạo để xử lý hành động của chúng tôi. Vì vậy, chúng ta hãy bẻ khóa

Trong plugin của bạn, hãy tạo một chức năng và thêm nó vào hook mới đã được tạo cho chúng tôi. Đây là cách

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

function my_user_vote() {

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
      exit("No naughty business please");
   }   

   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
   $vote_count = ($vote_count == ’) ? 0 : $vote_count;
   $new_vote_count = $vote_count + 1;

   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);

   if($vote === false) {
      $result['type'] = "error";
      $result['vote_count'] = $vote_count;
   }
   else {
      $result['type'] = "success";
      $result['vote_count'] = $new_vote_count;
   }

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();

}

function my_must_login() {
   echo "You must log in to vote";
   die();
}

Trước hết, chúng tôi đã xác minh nonce để đảm bảo rằng yêu cầu là tốt đẹp và hợp pháp. Nếu không, chúng tôi chỉ cần ngừng chạy tập lệnh. Mặt khác, chúng tôi tiếp tục và lấy số phiếu bầu từ cơ sở dữ liệu; . Sau đó, chúng tôi thêm

add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') );
   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'my_voter_script' );

}

1 vào đó để tìm số phiếu bầu mới

Sử dụng chức năng

add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') );
   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'my_voter_script' );

}

2, chúng tôi thêm số lượt bình chọn mới vào bài đăng của mình. Chức năng này tạo dữ liệu meta của bài đăng nếu nó chưa tồn tại, vì vậy chúng tôi có thể sử dụng nó để tạo chứ không chỉ cập nhật. Hàm trả về

add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') );
   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'my_voter_script' );

}

3 nếu thành công và

add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') );
   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'my_voter_script' );

}

4 nếu thất bại, vì vậy hãy tạo một mảng cho cả hai trường hợp

Tôi thích tạo các mảng kết quả này cho tất cả các hành động vì chúng chuẩn hóa việc xử lý hành động, cung cấp cho chúng tôi thông tin sửa lỗi tốt. Và, như chúng ta sẽ thấy trong giây lát, cùng một mảng có thể được sử dụng trong các lệnh gọi AJAX và không phải AJAX, khiến cho việc xử lý lỗi trở nên dễ dàng

Mảng này là thô sơ. Nó chỉ chứa loại kết quả (lỗi hoặc thành công) và số phiếu bầu. Trong trường hợp không thành công, số phiếu bầu cũ được sử dụng (giảm phiếu bầu của người dùng, vì nó không được thêm vào). Trong trường hợp thành công, chúng tôi bao gồm số phiếu bầu mới

Cuối cùng, chúng tôi phát hiện xem hành động có được bắt đầu thông qua lệnh gọi AJAX hay không. Nếu vậy, thì chúng tôi sử dụng hàm

add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') );
   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'my_voter_script' );

}

5 để chuẩn bị mảng cho mã JavaScript của chúng tôi. Nếu cuộc gọi được thực hiện mà không có AJAX, thì chúng tôi chỉ cần gửi người dùng trở lại nơi họ đến; . Chúng tôi cũng có thể đặt mảng trong cookie hoặc trong biến phiên để trả lại cho người dùng theo cách tương tự, nhưng điều này không quan trọng đối với ví dụ này

Luôn kết thúc tập lệnh của bạn bằng hàm

add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') );
   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'my_voter_script' );

}

6 để đảm bảo rằng bạn nhận được đầu ra phù hợp. Nếu bạn không bao gồm điều này, bạn sẽ luôn nhận được một chuỗi

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

function my_user_vote() {

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
      exit("No naughty business please");
   }   

   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
   $vote_count = ($vote_count == ’) ? 0 : $vote_count;
   $new_vote_count = $vote_count + 1;

   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);

   if($vote === false) {
      $result['type'] = "error";
      $result['vote_count'] = $vote_count;
   }
   else {
      $result['type'] = "success";
      $result['vote_count'] = $new_vote_count;
   }

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();

}

function my_must_login() {
   echo "You must log in to vote";
   die();
}

8 cùng với kết quả

Chức năng xử lý người dùng đã đăng xuất rõ ràng là kém, nhưng nó chỉ mang ý nghĩa ví dụ. Bạn có thể mở rộng nó bằng cách chuyển hướng người dùng đến trang đăng ký hoặc bằng cách hiển thị thêm thông tin hữu ích

Thêm JavaScript vào Mix

Bởi vì chúng tôi hiện đã xử lý hành động của người dùng bằng các phương pháp thông thường, chúng tôi có thể bắt đầu xây dựng trong JavaScript. Nhiều nhà phát triển thích thứ tự này vì nó đảm bảo sự xuống cấp nhẹ nhàng. Để hệ thống của chúng tôi sử dụng AJAX, chúng tôi sẽ cần thêm jQuery, cũng như mã JavaScript của riêng chúng tôi. Để làm điều này, theo phong cách WordPress, chỉ cần truy cập plugin của bạn và thêm phần sau

add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') );
   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'my_voter_script' );

}

Đây là cách WordPress bao gồm các tệp JavaScript. Đầu tiên, chúng tôi đăng ký tệp JavaScript để WordPress biết về nó (vì vậy hãy đảm bảo tạo tệp và đặt nó ở đâu đó trong plugin). Đối số đầu tiên của hàm

add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') );
   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'my_voter_script' );

}

8 là “tay cầm” của tập lệnh của chúng ta, đây là một mã định danh duy nhất. Thứ hai là vị trí của tập lệnh. Đối số thứ ba là một mảng các phụ thuộc. Kịch bản của chúng tôi sẽ yêu cầu jQuery, vì vậy tôi đã thêm nó làm phần phụ thuộc. WordPress đã đăng ký jQuery, vì vậy tất cả những gì chúng tôi cần thêm là phần xử lý của nó. Để biết danh sách chi tiết các tập lệnh mà WordPress đăng ký, hãy xem

Bản địa hóa tập lệnh không thực sự cần thiết, nhưng đó là một cách hay để xác định các biến cho tập lệnh của chúng tôi sử dụng. Chúng tôi cần sử dụng URL của quản trị viên-ajax của chúng tôi. php, nhưng vì điều này là khác nhau đối với mọi miền, chúng tôi cần chuyển nó vào tập lệnh. Thay vì viết mã cứng vào, hãy sử dụng hàm

add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') );
   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'my_voter_script' );

}

9. Chúng tôi thêm xử lý tập lệnh làm đối số đầu tiên, tên đối tượng làm đối số thứ hai và chúng tôi có thể thêm các thành viên đối tượng dưới dạng một mảng trong tham số thứ ba. Tất cả những điều này tóm lại là, trong my_voter_script của chúng tôi. js, chúng tôi sẽ có thể sử dụng

jQuery(document).ready( function() {

   jQuery(".user_vote").click( function(e) {
      e.preventDefault(); 
      post_id = jQuery(this).attr("data-post_id")
      nonce = jQuery(this).attr("data-nonce")

      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {action: "my_user_vote", post_id : post_id, nonce: nonce},
         success: function(response) {
            if(response.type == "success") {
               jQuery("#vote_counter").html(response.vote_count)
            }
            else {
               alert("Your vote could not be added")
            }
         }
      })   

   })

})

0, chứa URL của quản trị viên-ajax của chúng tôi. tập tin php

Khi các tập lệnh của chúng tôi đã được đăng ký, chúng tôi thực sự có thể thêm chúng vào các trang của mình bằng cách liệt kê chúng. Chúng tôi không cần phải tuân theo bất kỳ thứ tự cụ thể nào;

Khi đã xong, trong my_voter_script. js tệp JavaScript, dán đoạn mã sau

jQuery(document).ready( function() {

   jQuery(".user_vote").click( function(e) {
      e.preventDefault(); 
      post_id = jQuery(this).attr("data-post_id")
      nonce = jQuery(this).attr("data-nonce")

      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {action: "my_user_vote", post_id : post_id, nonce: nonce},
         success: function(response) {
            if(response.type == "success") {
               jQuery("#vote_counter").html(response.vote_count)
            }
            else {
               alert("Your vote could not be added")
            }
         }
      })   

   })

})

Hãy quay trở lại vấn đề cơ bản. Đây sẽ là thời điểm tốt để những người mới sử dụng AJAX nắm bắt được những gì đang diễn ra. Khi người dùng nhấp vào nút bình chọn mà không sử dụng JavaScript, họ sẽ mở một tập lệnh và gửi một số dữ liệu cho tập lệnh đó bằng phương thức GET (chuỗi truy vấn). Khi JavaScript được sử dụng, nó sẽ mở trang cho họ. Tập lệnh được cung cấp URL để điều hướng đến và các tham số giống nhau, do đó, ngoài một số điều nhỏ, từ quan điểm của tập lệnh đang chạy, không có sự khác biệt giữa người dùng nhấp vào liên kết và yêu cầu AJAX được gửi

Sử dụng dữ liệu này, hàm

jQuery(document).ready( function() {

   jQuery(".user_vote").click( function(e) {
      e.preventDefault(); 
      post_id = jQuery(this).attr("data-post_id")
      nonce = jQuery(this).attr("data-nonce")

      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {action: "my_user_vote", post_id : post_id, nonce: nonce},
         success: function(response) {
            if(response.type == "success") {
               jQuery("#vote_counter").html(response.vote_count)
            }
            else {
               alert("Your vote could not be added")
            }
         }
      })   

   })

})

2 được xác định trong plugin của chúng tôi sẽ xử lý dữ liệu này và sau đó gửi lại cho chúng tôi mảng kết quả được mã hóa JSON. Vì chúng tôi đã chỉ định rằng dữ liệu phản hồi của chúng tôi phải ở định dạng JSON, nên chúng tôi có thể sử dụng nó rất dễ dàng chỉ bằng cách sử dụng phản hồi làm đối tượng

Trong ví dụ của chúng tôi, tất cả những gì xảy ra là bộ đếm phiếu thay đổi giá trị của nó để hiển thị số phiếu mới. Trên thực tế, chúng ta cũng nên đưa vào một số loại thông báo thành công để đảm bảo người dùng nhận được phản hồi rõ ràng. Ngoài ra, hộp cảnh báo lỗi sẽ rất xấu;

Phần kết luận

Điều này kết thúc hướng dẫn nhanh của chúng tôi về cách sử dụng AJAX trong WordPress. Rất nhiều chức năng vẫn có thể được thêm vào, nhưng điểm chính của bài viết này là chỉ ra cách thêm đúng chức năng AJAX vào plugin. Tóm lại, bốn bước liên quan là

1. Thực hiện cuộc gọi AJAX;
2. Tạo chức năng sẽ xử lý hành động;
3. Thêm chức năng vào hook, được tạo động cho chúng tôi với tham số hành động;
4. Tạo trình xử lý thành công khi cần thiết

Như đã đề cập, hãy đảm bảo mọi thứ hoạt động tốt mà không cần JavaScript trước khi thêm nó, để trang web xuống cấp đúng cách đối với những người đã tắt nó

Hãy nhớ rằng, bởi vì chúng tôi đang sử dụng hook, nên chúng tôi cũng có thể liên kết các chức năng WordPress hiện có với lệnh gọi AJAX của mình. Nếu bạn đã có một chức năng bỏ phiếu tuyệt vời, bạn có thể kết hợp nó sau khi thực tế bằng cách đính kèm nó vào hành động. Điều này và sự dễ dàng mà chúng ta có thể phân biệt giữa các trạng thái đăng nhập, làm cho hệ thống xử lý AJAX của WordPress thực sự rất mạnh mẽ

Làm cách nào để sử dụng cuộc gọi Ajax trong WordPress?

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

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

Làm cách nào tôi có thể gọi từ Ajax?