Hướng dẫn how do i use ajax in wordpress? - làm cách nào để sử dụng ajax trong wordpress?

  • 12 phút đọc
  • WordPress, PHP, JavaScript

Trong vài năm qua, Ajax đã leo vào các trang web và dần dần trở thành cách tạo ra các trang web năng động, thân thiện với người dùng và phản hồi. 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 thực sự phải tải lại nó trong trình duyệt. Ví dụ: Google Docs sử dụng công nghệ này khi tiết kiệm công việc của bạn cứ sau vài phút. Bài viết này đã được xem xé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 là chính xác, nhưng theo nghĩa lỏng lẻo của từ-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ó 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 về SmashingMag: on SmashingMag:

  • Các thuật ngữ thiết kế công nghiệp thiết kế web và các điều khoản web
  • Tại sao Ajax không đủ
  • Làm thế nào để trở thành một nhà phát triển WordPress hàng đầu
  • Hướng dẫn dành cho người mới bắt đầu để tạo trang web WordPress

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

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 đến một tập lệnh và sau đó nhận và xử lý phản hồi tập lệnh mà không cần tải lại trang.

Nếu bạn không quen thuộc với Ajax, tôi khuyên bạn nên tiếp tục đến cuối bài viết này và sau đó đọc bài viết Wikipedia trên Ajax, tiếp theo là một số hướng dẫn của 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 thử nó, bởi vì nó khiến tôi bối rối không biết gì; Và sự thật là, bạn sẽ hiếm khi tương tác với Ajax ở trạng thái RAW Raw của nó - bạn thường sẽ sử dụng những người trợ giúp như jQuery.

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ơ người dùng mà không cần 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 được gửi qua AJAX vào tập lệnh xử lý, lưu dữ liệu và trả về chuỗi dữ liệu được lưu. Sau đó, bạn có thể xuất dữ liệu đó cho người dùng bằng cách chèn nó vào trang.

Điều cần nắm bắt về Ajax là cách không khác biệt so với những gì bạn đã làm. 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 nó 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à làm thế nào thông tin mà người dùng nhập vào tập lệnh và quay lại cho người dùng - mọi thứ khác đều giống nhau.

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

Cách không sử dụng Ajax

Một phương pháp đã xuất hiện và tôi đã sử dụng 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 WordPress, phát hiện người dùng hiện tại, v.v. Nhưng đây về cơ bản là một vụ hack và vì vậy không phải là chứng minh trong tương lai. Nó ít an toàn hơn và không cung cấp cho bạn một số tùy chọn tuyệt vời mà hệ thống WordPress thực hiện.

Cách thức hoạt động của Ajax trong WordPress

Bởi vì AJAX đã được sử dụng trong phần cuối của WordPress, nên về cơ bản, nó đã được thực hiện 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 cùng xem xét quá trình nói chung trước khi lặn vào mã.

Mỗi yêu cầu AJAX đều đi qua tệp quản trị-ajax.php trong thư mục wp-admin. Tệp này được đặt tên là Quản trị viên Ajax có thể hơi khó hiểu. Tôi khá đồng ý, nhưng đây chỉ là cách quá trình phát triển bật ra. Vì vậy, chúng ta nên sử dụng admin-ajax.php cho AJAX back-end và 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 thức 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_actionwp_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 một hàm vào móc đầu tiên có nghĩa là chức năng đó sẽ bắn nếu người dùng đăng nhập bắt đầu hành động. Sử dụng móc thứ hai, bạn có thể phục vụ cho người dùng đăng nhập riêng biệt.

Thực hiện Ajax trong WordPress

Hãy để xây dựng một hệ thống bỏ phiếu thô sơ như một ví dụ nhanh chóng. Đầ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ới phần này, hãy xem hướng dẫn về việc tạo một plugin. Ngoài ra, hãy tìm tập tin đơn.php chủ đề của bạn và mở nó.

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

Hãy để tạo ra một liên kết cho phép mọi người đưa ra một ngón tay cái cho các bài viết của chúng tôi. Nếu người dùng đã bật JavaScript, nó sẽ sử dụng JavaScript; Nếu không, nó sẽ theo liên kết. Ở đâu đó trong tệp đơn.php của bạn, có lẽ gần tiêu đề bài viết, thêm mã sau:

ID, "votes", true);
   $votes = ($votes == "") ? 0 : $votes;
?>
This post has 
votes
ID.'&nonce='.$nonce); echo 'vote for this article'; ?>

Đầu tiên, hãy để Lôi 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. Chúng ta cũng đảm bảo rằng nếu nó không tồn tại (tức là giá trị của nó là một chuỗi trống), chúng ta sẽ 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 ra một liên kết thông thường ở đây. B bit duy nhất là một nhúm của bảo mật, sử dụng không phải, để đảm bảo không có trò chơi xấu nào. Mặt khác, đây chỉ đơn giản là một liên kết trỏ đến tệp admin-ajax.php, với hành động và id của bài đăng mà người dùng được chỉ định dưới dạng chuỗi truy vấn.

Để phục vụ 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, chúng tôi sẽ đính kèm một sự kiện nhấp chuột và 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 điều này để chuyển thông tin cần thiết cho JavaScript của chúng tôi.

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

Nếu bạn nhấp vào liên kết này ngay bây giờ, bạn nên được đưa đến tập lệnh quản trị-Ajax.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 ra để xử lý hành động của chúng tôi. Vì vậy, hãy để Lừa bị nứt!

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

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 rằng Nonce để đảm bảo rằng yêu cầu là tốt đẹp và hợp pháp. Nếu đó là một trò chơi, chúng tôi chỉ cần ngừng chạy tập lệnh. Nếu không, chúng tôi tiếp tục và nhận số lượng phiếu bầu từ cơ sở dữ liệu; Đảm bảo đặt nó thà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();
}
5 nếu chưa có số lượng phiếu bầ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 nó để tìm số lượng 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ượng phiếu bầu mới vào bài đăng của chúng tôi. Chức năng này tạo ra dữ liệu meta Post Post nếu nó không tồn tại, vì vậy chúng ta có thể sử dụng nó để tạo, 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 cho một lỗi, vì vậy hãy để tạo ra một mảng cho cả hai trường hợp.

Tôi muốn 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 xử lý hành động, cung cấp cho chúng tôi thông tin gỡ lỗi tốt. Và, như chúng ta sẽ thấy trong một giây, cùng một mảng có thể được sử dụng trong các cuộc gọi AJAX và không phải Ajax, làm cho việc xử lý lỗi một cinch.

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ố lượng phiếu bầu. Trong trường hợp thất bại, số lượng phiếu bầu cũ được sử dụng (chiết khấu 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ố lượng phiếu bầu mới.

Cuối cùng, chúng tôi phát hiện liệu hành động có được bắt đầu thông qua cuộc gọi AJAX hay không. Nếu vậy, chúng tô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' );

}
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; Rõ ràng, họ nên được hiển thị số lượng phiếu bầu cập nhật. Chúng tôi cũng có thể đặt mảng vào cookie hoặc trong một biến phiên để trả lại cho người dùng theo cùng một cách, nhưng điều này không quan trọng đối với ví dụ này.

Luôn kết thúc cá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 lấy lại đầu ra thích hợp. Nếu bạn không bao gồm điều này, bạn sẽ luôn lấy lại 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ỉ có nghĩa là một ví dụ. Bạn có thể mở rộng trên 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ông tin hữu ích hơn.

Thêm JavaScript vào hỗn hợp

Bởi vì chúng tôi đã xử lý hành động của người dùng bằng các phương thức 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 duyên dá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 các 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 cho 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 tôi, đây là một định danh duy nhất. Thứ hai là vị trí của tập lệnh. Đối số thứ ba là một loạt 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ó như một sự 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à xử lý của nó. Để biết danh sách chi tiết các tập lệnh mà các đăng ký WordPress, hãy xem Codex WordPress.

Bản địa hóa tập lệnh là không hoàn toàn cần thiết, nhưng đó là một cách tốt để xác định các biến cho tập lệnh của chúng tôi sử dụng. Chúng ta cần sử dụng URL của tệp admin-ajax.php, nhưng vì điều này là khác nhau đối với mỗi tên miền, chúng ta cần chuyển nó đến tập lệnh. Thay vì mã hóa cứng, hãy để 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' );

}
9. Chúng tôi thêm tay cầm 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 làm mảng trong tham số thứ ba. Tất cả điều này là tất cả các vấn đề là, trong tệp my_voter_script.js của chúng tôi, 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 tệp admin-ajax.php của chúng tôi.

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 chúng tôi bằng cách giới thiệu chúng. Chúng tôi không cần phải tuân theo bất kỳ đơn đặt hàng cụ thể nào; WordPress sẽ sử dụng đúng thứ tự dựa trên các phụ thuộc.

Sau khi thực hiện xong, trong tệp javascript my_voter_script.js, dá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 để trở lại với những điều cơ bản. Đây sẽ là thời điểm tốt cho những người trong chúng ta mới sử dụng Ajax để nắm bắt những gì đang diễn ra. Khi người dùng nhấp vào nút bỏ phiếu mà không cần sử dụng JavaScript, họ sẽ mở tập lệnh và gửi một số dữ liệu bằng phương thức GET (chuỗi truy vấn). Khi JavaScript được sử dụng, nó sẽ mở trang cho họ. Kịch bản được cung cấp URL để điều hướng và cùng một tham số, vì vậy ngoài một số điều nhỏ, từ quan điểm của tập lệnh đang được 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ý điều này và sau đó gửi lại cho chúng tôi mảng kết quả được mã hóa JSON. Bởi 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, 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 bầu thay đổi giá trị của nó để hiển thị số lượng phiếu bầu mới. Trong thực tế, chúng ta cũng nên bao gồm một số thông điệp 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 cho một lỗi sẽ rất xấu xí; Hãy thoải mái điều chỉnh nó theo ý thích của bạn.

Sự kết luận

Điều này kết thúc hướng dẫn nhanh của chúng tôi về việc 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 chức năng Ajax đúng vào các 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ý các hành động;
  3. Thêm hàm vào móc, được tạo động cho chúng tôi với tham số hành động;
  4. Tạo người 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 cho những người đã vô hiệu hóa nó.

Hãy nhớ rằng, bởi vì chúng tôi đang sử dụng móc, chúng tôi cũng có thể buộc các hàm WordPress hiện có với các cuộc gọi AJAX của chúng tôi. Nếu bạn đã có một chức năng bỏ phiếu tuyệt vời, bạn có thể buộc nó vào sau khi thực tế bằng cách gắn 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ý WordPress Ajax thực sự rất mạnh mẽ.

Hướng dẫn how do i use ajax in wordpress? - làm cách nào để sử dụng ajax trong wordpress?
(al)

Làm thế nào tôi có thể biết nếu WordPress Ajax đang hoạt động?

Để xem nếu yêu cầu hiện tại là yêu cầu AJAX được gửi từ thư viện JS (như jQuery), bạn có thể thử một cái gì đó như thế này: if (! ) == 'xmlhttprequest') {// Đây là một yêu cầu ajax. }if( ! empty( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) && strtolower( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ]) == 'xmlhttprequest' ) { //This is an ajax request. }

Quản trị viên là gì

Quản trị viên-Ajax.Tệp PHP chứa tất cả các mã để định tuyến các yêu cầu AJAX trên WordPress.Mục đích chính của nó là thiết lập kết nối giữa máy khách và máy chủ bằng AJAX.WordPress sử dụng nó để làm mới nội dung của trang mà không tải lại nó, do đó làm cho nó năng động và tương tác với người dùng.contains all the code for routing Ajax requests on WordPress. Its primary purpose is to establish a connection between the client and the server using Ajax. WordPress uses it to refresh the page's contents without reloading it, thus making it dynamic and interactive to the users.

Ajax hoạt động như thế nào trên trang web?

AJAX cho phép các trang web được cập nhật không đồng bộ bằng cách trao đổi một lượng nhỏ dữ liệu với máy chủ phía sau hậu trường.Điều này có nghĩa là có thể cập nhật các phần của trang web, mà không tải lại toàn bộ trang.Các trang web cổ điển, (không sử dụng AJAX) phải tải lại toàn bộ trang nếu nội dung sẽ thay đổi.. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

Ajax được sử dụng để làm gì?

Ajax là gì?Ajax là viết tắt của JavaScript không đồng bộ và XML.Tóm lại, đó là việc sử dụng đối tượng XMLHTTPREQUEST để giao tiếp với các máy chủ.Nó có thể gửi và nhận thông tin ở các định dạng khác nhau, bao gồm các tệp JSON, XML, HTML và văn bản.to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files.