TODO: To change the header's content go to Dr.Explain menu Options : Project Settings : HTML (CHM) Export : Setup HTML Template and Layout
×
Menu
Index
Search
 
   
   
   
 
TODO: To change the footer's content go to Dr.Explain menu Options : Project Settings : HTML (CHM) Export : Setup HTML Template and Layout

Sử lý ajax trong wordpress

 
Tính năng ajax đã được sử trong wordpress back end, hỗ trợ rất dễ dàng tất cả những gì bạn cần làm là sử dụng ajax api của wordpress, chạy trên file admin-ajax.php trong thư mục wp-admin.
 
Mỗi một yêu cầu ajax được gửi đi, sẽ nhận dạng thông qua tên action mà tạo 2 hook 'wp_ajax_{my_action}' và 'wp_ajax_nopriv_{my_action}' trong đó ‘my_action’ là tên hành động.
Thêm hàm liên kết vào hook đầu tiên nghĩa là hàm sẽ kích hoạt khi người dùng đó đăng nhập vào hệ thống wordpress, trường hợp này sử dụng khi bạn tương tác với dữ liệu liệu nhạy cảm, yêu cầu thông tin của người dùng. Ngược lại với hook thứ 2 dành cho thiết kế riêng cho mọi người dung.
 
Bài tập: Ví dụ chúng ta tạo link cho phép người dùng vote bài viết.
 
- Hiển thị votes của bài viết hiện tại. Bạn có thể đặt link votes gần tiêu đề bài viết trong file single.php, thêm dòng code sau trong vòng lặp:
<?php
   $votes = get_post_meta($post->ID, "votes", true)
   $votes = ($votes == "") ? 0 : $votes;
?>
This post has <div id='vote_counter'><?php echo $votes ?></div> votes<br>
 
Lưu dữ liệu ‘votes’ gắn vào meta key của post. Meta field ‘votes’ sẽ lưu tổng số votes người dùng bình chọn cho bài viết. Nếu giá trị này chưa có bạn hiển thị chuỗi ban đầu bằng 0.
 
Tạo liên kết ajax:
<?php
   $nonce = wp_create_nonce("my_user_vote_nonce");
    $link = admin_url('admin-ajax.php?action=my_user_vote&post_id='.$post->ID.'&nonce='.$nonce);
    echo '<a class="user_vote" data-nonce="' . $nonce . '" data-post_id="' . $post->ID . '" href="' . $link . '">vote for this article</a>';
?>
Giải thích:
 
Tạo hàm sử lý action.
Bước tiếp theo, chúng ta tạo hàm sử lý nội dung ajax (thực thi action) gán vào hook wp_ajax_my_user_vote & wp_ajax_nopriv_my_user_vote.
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();
}
Lưu ý:
 
Như đã giải thích:
 
Để hàm my_user_vote hoạt động cho mọi người dùng bạn sửa lại 2 hook trên như sau:
add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_user_vote");
 
Khởi tạo jquery ajax:
Chúng ta nên viết code javascript vào file riêng, do đó thêm file my_voter_script.js vào website với đoạn code 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_enqueue_script( 'my_voter_script');
   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));       
 
   wp_enqueue_script( 'jquery' );
 
}
 
Hàm wp_localize_script giúp bạn chuyển đối tượng php sang javascript, khá hữu ích khi bạn lưu giá trị PHP sang javascript. Ở đây chúng ta sử dụng để lưu địa chỉ ajax.
Tạo file my_voter_script.js với nội dung sau:
jQuery(document).ready( function() {
 
   jQuery(".user_vote").click( function() {
      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")
            }
         }
      })  
 
   })
 
});
 

The contents of Sử lý ajax trong wordpress

Tạo sử lý ajax riêng
Made with help of Dr.Explain

Unregistered version