Jquery (phần tiếp theo)

Hãy click vào link này xem demo:
Toàn bộ link trên website này đều bị chặn bởi hello world. Demo sử dụng jquery


Link Google
Link Tuổi Trẻ

• 1 BAM! 0
• 2 BAM! 1
• 3 BAM! 2
• 4 BAM! 3

Please rate: 1 2 3 4 5

 

JQUERY và AJAX:.

Tôi đoan chắc rằng, đây là điều mà chúng ta mong đợi nhiều nhất, và với sức mạnh của Jquery, vấn đề viết mã cho ajax trở nên dễ dàng, ngắn gọn và dễ hiểu hơn bao giờ hết.

$(document).ready(function(){ // generate markup $("#rating").append("Please rate: "); for (var i = 1; i <= 5; i++) $("#rating").append("<a href='#'>" + i + "</a> "); // add markup to container and apply click handlers to anchors $("#rating a").click(function(e){ // stop normal link click e.preventDefault(); // send request $.post("rate.jsp", { rating: $(this).html() }, function(xml){ alert(xml); // format and output result $("#rating").html("Thanks for rating, bạn đã đánh giá: " + $("average", xml).text() + " điểm, số lần bạn vote: " + $("count", xml).text()); }); }); });

<div id="rating">

Dù có nhiều cái hay đáng để nói ở đây, nhưng tôi nghĩ sau khi nhìn mã bạn đã hiểu, tôi chỉ xin giả thích sơ lược

Khi click vào một Link (thẻ a) thuộc id rating, jquery sẽ gửi một yêu cầu bất đồng bộ dưới dạng POST

rate.jsp

<% Integer count = (Integer) session.getAttribute("count"); if (count == null) { count = 1; } count++; session.setAttribute("count", count); String rate = request.getParameter("rating"); String xml = "<ratings><average>" + rate + "</average><count>" + count + "</count></ratings>"; out.print(xml); %>

Thanks for rating, bạn đã đánh giá: 2 điểm, Số lần bạn vote: 4

rate.php

<?php define('STORE', 'ratings.dat'); function put_contents($file,$content) { $f = fopen($file,"w"); fwrite($f,$content); fclose($f); } if(isset($_REQUEST["rating"])) { $rating = $_REQUEST["rating"]; $storedRatings = unserialize(file_get_contents(STORE)); $storedRatings[] = $rating; put_contents(STORE, serialize($storedRatings)); $average = round(array_sum($storedRatings) / count($storedRatings), 2); $count = count($storedRatings); $xml = "<ratings><average>$average</average><count>$count</count></ratings>"; header('Content-type: text/xml'); echo $xml; } ?>

Và nếu bạn yêu thích PHP.

Jquery hỗ trợ ajax bằng nhiều cách, việc sử dụng $.POST cũng như $.GET là cách hỗ trợ cấp cao, bạn có thể dùng những cách khác thấp hơn để có nhiều tùy biến hơn, cũng theo đó, bạn có thể dùng kiểu trả về JSONP hỗ trợ cho cross domain.

Một vài kết quả của demo được trình bày phía trên.

Lưu ý là demo rating cho ajax không chạy được, tôi thiếu một public server để có thể chạy trực tiếp trên web blog này.

Một số link tham khảo

http://jquery.bassistance.de/api-browser/

http://remysharp.com/jquery-api/

download demo

facebook

twitter

google+

fb share

About Langthang

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.