Sử dụng ajax trong wordpress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Sử dụng ajax trong wordpress

Ajax là công nghệ cấp phép bạn cập nhật nội dung động của trang mà chẳng cần load lại trang trên trình duyệt. Ví dụ google docs có độ năng ajax để tự động lưu tư liệu sau một vài phút.
ajax trong wordpress
Trong khi có biết bao cách sử dụng ajax trong wordpress, nhưng có 1 cách duy nhất được hỗ trợ bởi wordpress đã sử dụng quen thuộc tại giao diện wordpress admin. Vì nó là một phần tính năng của wordpress, với nhiều tùy chọn và những cập nhật mới sẽ phù hợp với công nghệ mới hiện nay.

Ajax là gì?

Nếu bạn chưa làm việc với ajax trong trang của mình, trước lúc đọc bài viết này bạn cũng có thể nhìn qua cách hoạt động những khái niệm trên Wikipedia lý giải về ajax. Một số chỉ dẫn khác bạn cũng nên tham khảo ví dụ: http://www.tizag.com/ajaxTutorial/

Tuy nhiên kiến thức thuần gốc về ajax ít khi bạn sử dụng, viết nhiều code trong lúc ajax jquery thâu tóm chỉ một dòng cũng thực hành một công việc tương tự.

Bản chất ajax là phối hợp của mã HTML, CSS và javascript cho phép bạn gửi dữ liệu đến script và tại nơi đó sẽ nhận và sử lý dữ liệu trả nội dung quay quay trở lại cho người gửi, từ đó bạn không cần load lại trang mà cũng có thể thay đổi dữ liệu động.

Nếu bạn tạo một trang trên website mà user cũng có thể có thể sửa tin tức profile của họ, bạn cũng đều có thể sử dụng Ajax để cập nhật tin tức người dùng, chẳng cần dùng form submit thông thường như trước đây. Bằng công nghệ này có thể sửa một phần dữ liệu mau chóng ngay lập tức.

Bạn mường tượng như thế này, trên form người dùng đã hoàn chỉnh nhập dữ liệu, khi người dùng click vào nút, dữ liệu này sẽ gửi đi thông qua ajax đến script sử lý, nơi lưu dữ liệu sau đó trả về chuỗi thông báo hoàn chỉnh “data saved.”. Và bạn cũng có thể đưa tin nhắn thông báo cho người sử dụng bằng phương pháp chèn nó lên trang.

Để khám phá đầy đủ những thực lực của ajax bạn sẽ cần thành thạo Javascript (jQuery là đủ), cũng giống HTML, CSS và PHP lập trình web động.

Ajax bổ trợ trong wordpress

Bởi vì tính năng ajax đã được sử trong wordpress back end, hỗ trợ rất đơn giản mọi thứ 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 . Tên file có thể gây mâu thuẫn, tò mò nhưng những gì wordpress để lại sẽ giúp bạn ít nhiều, chúng ta sẽ sử dụng admin-ajax.php cho phía back-end và người sử dụng tương tác với nó bằng ajax.

Mỗi yêu cầu gửi đi, sẽ cung cấp dữ liệu dạng phương thức GET hoặc POST gọi là action . Dựa vào action code trong admin-ajax.php tạo 2 hook wp_ajax_ my_action wp_ajax_nopriv_ my_action trong đó ‘my_action’ là biến trong mảng dữ liệu GET, POST.

Thêm hàm liên kết vào hook trước mắt nghĩa là hàm sẽ kích hoạt khi người sử dụng đó đăng nhập vào hệ thống wordpress, tình huống 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 tin tức của người dùng. Ngược lại với hook thứ hai dành cho thiết kế riêng cho mọi người dung.

Thực thi Ajax trong wordpress

Ví dụ chúng ta tạo link cho phép người dùng vote bài viết, nếu user bật sử dụng javascript, liên kết sẽ sử lý dữ liệu động ajax, còn không hiển thị liên kết trang thông thường. 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:

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

Lưu dữ liệu ‘votes’ gắn vào meta key của post. Meta field ‘votes’ sẽ lưu tổng cộng votes người sử dụng bầu chọn cho bài viết. Nếu giá trị này chưa có bạn hiển thị chuỗi mới đầu bằng 0.

Chúng ta tạo link thường thì với thẻ A, chứa liên kết vào file admin-ajax.php trong đó xác định tin tức ‘action’ thực thi và các tham số sử dụng cho action như chỉ số post_id. Ở đây thiết lập chút bảo mật với tham số ‘nonce’ là chuỗi mã hóa nhận dạng giữa nơi gọi và nơi nhận cho buổi lễ này, tránh hacker lợi dụng.

Để tái tạo javascript cho liên kết votes, chúng ta thêm class ‘user_vote’ sẽ dùng để làm tạo sự kiện và thuộc tính data-post_id chứa ID của post. Những thuộc tính này sẽ tiện lấy bởi code javascript.

Sử lý action không có Javascript

Nếu bạn click vào link ngay bây giờ, bạn sẽ được chuyển đến trang admin-ajax.php và nội dung script trả về chuỗi 0 . Tùy thuộc vào phiên bản wordpress, cũng có thể trả về -1 . Điều này nghĩa là không có hàm action được tìm thấy hoặc sử dụng hàm wordpress trong action bất hợp lệ, vd: gọi update_post_meta với anonymous. Trong plugin/theme của bạn tạo hàm thực thi action và gắn vào hook với tên action ‘my_user_vote’ trên địa chỉ URL bởi tham số action.

 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(); }  

Như đã lý giải ở trên, hook ‘wp_ajax_nopriv’ sẽ thực thi trước hook ‘wp_ajax’ và kích hoạt khi user chưa đăng nhập để hiện thông báo và cũng có thể có thể dừng sử lý hook wp_ajax tiếp sau đó bởi lệnh die() .

Mặc định mọi ajax thông qua admin-ajax.php đều yêu cầu phiên làm việc người dùng, cái tên ‘admin’ cũng nói lên điều đó, nếu bạn không khai báo thêm hook ‘wp_ajax_nopriv_xxx’ thì sử dụng mặc định và bạn có thể thêm hook này liên kết vào hàm hiển thị dòng tin nhắn yêu cầu đăng nhập như ở đoạn code trên.

Để tiếp tục sử lý vào hook ajax ‘wp_ajax_’, bạn phải bỏ lệnh ngắt die() hoặc exit() trong action ‘wp_ajax_nopriv_’ và để tiết kiệm function cách tốt đặc biệt là bạn trỏ 2 hook này vào chung hàm sử lý nội dung. Để hàm my_user_vote hoạt động cho mọi người sử 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");  

Chúng ta xác nhận chuỗi nonce để đảm bảo nơi gửi là đúng, vì chuỗi này đều tạo ở nơi gửi và nơi nhận. Nếu không đúng có thể lời gọi từ hacker và chúng ta cho dừng script. Sử dụng hàm get_post_meta lấy lượng votes ngày nay và cập nhật +1 votes bởi hàm update_post_meta vào meta key ‘votes’.

Cuối cùng, chúng ta kiểm tra lời gọi URL xuất phát trực diện trên trình duyệt hay gọi ẩn bằng đường ajax sử dụng biến $_SERVER['HTTP_X_REQUESTED_WITH'] . Nếu đúng vậy, bạn xuất chuỗi đối tượng JSON ra màn hình tạo với hàm json_encode . Hàm này sẽ được chuyển đổi sang mảng trong javascript, nơi nhận giá trị trả về.

Kết thúc script, bạn luôn nhớ để lệnh dừng die() . Nếu bạn không thêm lệnh này, bạn luôn nhận giá trị trả về 0/-1 đi kèm kết quả.

Thêm code Javascript sử lý Ajax

Chúng ta chèn thêm thư viện jQuery, vào trang và đảm bảo dependency này thêm trước đoạn code thực thi lệnh javascript mà bạn sẽ tạo hàm ajax vào link votes cho các posts.
Thêm các loại sau đây vào functions.php

 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_obj', WP_PLUGIN_URL.'/my_plugin/empty_test.js' ); wp_localize_script( 'my_voter_script_obj', 'myAjax', array( 'ajaxurl' =>  admin_url( 'admin-ajax.php' ))); wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'my_voter_script' ); }  

Bạn cũng đều có thể khai báo lệnh thêm jquery vào thẻ head sau cũng đc tùy ý, vì hàm đăng ký script wp_register_script có khai báo các dependencies cần nạp trước rồi.
Hàm wp_localize_script có thể chẳng cần thiết, nhưng là cách tốt để giúp bạn chuyển mảng php sang mảng biến javascript, rất hữu ích khi bạn viết javascript sang một file mới có lấy biến là giá trị từ PHP. Như vậy Code trên có tạo biến myAjax.ajaxurl chứa URL tới file admin-ajax.php .
Lưu ý : Để wp_localize_script có thể hoạt động, bạn cần chèn file script .js rỗng với tên khai báo vào wp_enqueue_script trùng với tên bạn sẽ gắn đối tượng javascript bởi wp_localize_script, giống như trên là ‘my_voter_script_obj’. Nếu file empty_test.js có nội dung cũng đều có thể hàm ‘wp_localize_script’ sẽ không tạo đối tượng thành công.

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") } } }) }) });  

Tham khảo thêm: http://codex.wordpress.org/AJAX_in_Plugins
Tham khảo dịch vụ thiết kế website wordpress sử dụng Ajax tại Hoangweb.com
Chúc bạn thành công!

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể có thể nhận được sự trợ giúp trên Twitter và Facebook

Bài viết Sử dụng ajax trong wordpress được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang