1) Hiệu ứng ẩn và hiện trong jQuery
3.5Ajax với jQuery
Trong những năm gần đây, người ta hay đánh giá một trang web dựa vào công nghệ mà trang đó đang ứng dụng. Một trong những công nghệ trở nên rất đình đám trong thời gian gần đây là ứng dụng web được gọi là AJAX. Nó là tổng hợp của nhiều công nghệ khác nhau.
AJAX là chữ viết tắt của Asynchronous JavaScript and XML. Những công nghệ có trong một giải pháp AJAX bao gồm
JavaScript dùng để tương tác với người dùng hoặc các sự kiện liên quan đến trình duyệt.
Đối tượng XMLHttpRequest, cho phép những câu lệnh truy vấn được gửi đến server mà không làm gián đoạn những tác vụ khác của trình duyệt
XML ở trên server, hoặc những định dạng dữ liệu tương tự như HTML và JSON
Thêm JavaScript, dùng để chuyển đổi dữ liệu từ server và hiển thị nó lên trang web.
Ví dụ 1: Trong ví dụ này, chúng ta sẽ sử dụng hàm load () để tải tập tin message.txt từ máy chủ và hiển thị nội dung của nó trong thẻ <div>
<script> $(document).ready(function( ){
$("div").load("files/message.txt"); }); </script>
<div></div>
Ví dụ 2: Trong ví dụ này chúng ta sẽ sử dụng tham số callback. Sau khi hiển thị
dữ liệu xong chúng ta sẽ hiện một câu thông báo „Tải dữ liệu thành công‟
<script> $(document).ready(function( ){
$("div").load("files/message.txt",callback); });
function callback(){ $("#targetDiv").text("Tải dữ liệu thành công."); } </script>
3.5 Ajax với jQuery
Một số hàm thao tác với ajax bằng jQuery
1. load(url, parameters, callback)
Jquery có một số chức năng để thực thi kỹ thuật Ajax. Một trong những hàm phổ biến nhất là hàm load().Bạn sử dụng hàm load() để hiện thị những dữ liệu tải xuống trong một tập hợp các phần tử trực tiếp.
Url: là địa chỉ của trang nguồn bạn đang cần lấy
Parameters: là một đối tượng lưu giữ các giá trị mà bạn
muốn gửi đến máy chủ
Callback: là một hàm mà jQuery sẽ gọi đến khi quá trình
3.5 Ajax với jQuery
2) Sử dụng $.post( ) để gửi dữ liện đến Server
Bạn có thể muốn kiểm soát nhiều hơn khi phương thức POST hoặc GET được sử dụng, và bạn có thể muốn lấy bằng tay dữ liệu được tải về thoát khỏi sự tải về không cần thiết. Để làm điều này, jQuery cung cấp 2 phương thức
$.get và $.post. Các chức năng này cho phép bạn giao tiếp với máy chủ sử dụng phương thức POST và GET. Và
chúng cho phép bạn truy cập mà không tự động nạp nó vào phần tử nào hết
3.5 Ajax với jQuery
Ví dụ:
$(document).ready(function( ){ (adsbygoogle = window.adsbygoogle || []).push({});
$.post("action.php", {data: 1}, function(data){
$("div").text(data); }); }); Tập tin action.php <?php if ($_POST["data"] == "1") {
echo 'You sent the server a value of 1'; }
if ($_POST["data"] == "2") {
echo 'You sent the server a value of 2'; }
3.5 Ajax với jQuery
3) Sử dụng $.ajax( )
Cú pháp : $.ajax( url, [ settings ] )
Các tham số:
type: POST hoặc GET.
url: đường dẫn đến file xử lý(server side).
data: dữ liệu truyền đi.
dataType: kiểu dữ liệu trả về, bao gồm: xml, json, script, hoặc
html.
async: kiểu gọi: đồng bộ(synchronous) hoặc bất đồng
bộ(asynchronous).
3.5 Ajax với jQuery
Ví dụ: đếm số người xem một sản phẩm nào đó
<a href="chitiet.php?productId=1" onclick='countClick('1')'>iPhone 4</a>
function countClick(e) { $.ajax({ url:"product.php", type:"GET", data:{id:e}, success:function(data){ }}) }
Khi người dùng click vào link chi tiết sản phẩm thì trình duyệt sẽ chuyển sang trang chitiet.php và đồng thời ajax sẽ được gọi đi để đếm số lần click vào sản phẩm đó
Trang product.php
$sanpham_id = $_GET["id"];
$sql = "select dem from sanpham where id='{$sanpham_id}'";
$result = mysql_query($sql);
$row = mysql_fetch_row($result);
$luotxem = $row[0]+1;