Jquery

Ví dụ ajax-jquery .

Chào các bạn . Đây là 1 ví dụ nhỏ để tìm hiểu cách hoạt động của ajax-jquery .

– Bước 1: Bạn tạo 2 file: index.php, và ajax_huyen.php :

+ File index.php bạn thiết kế 2 cái select tỉnh, huyện như sau:

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
<body>
<select name=”tinh” id=”tinh”>
<option value=”0″>–Chọn tỉnh–</option>
<option value=”hcm”>TP.HCM</option>
<option value=”bd”>Bình Dương</option>
</select>
<span id=”shuyen”>
<select name=”huyen” id=”huyen”>
<option value=”0″>–Chọn huyện–</option>
</select>
</span>
</body>
</html>

(Chú ý select huyện nằm trong thẻ span có id là shuyen)

+ File ajax_huyen.php, dùng để xuất ra một cái select huyện, tùy thuộc vào id_tinh lấy từ $_GET
(Sau khi hiểu xong ví dụ này, bạn có thể gắn thêm câu lệnh kết nối xuống mysql để đọc thông tin lên cho giống thực tế, còn hiện tại cứ để làm như sau)

<?php
if ($_GET[‘id_tinh’] == ‘hcm’) {
echo ‘<select name=”huyen” id=”huyen”>
<option value=”0″>–Chọn huyện–</option>
<option value=”1″>Quận 1</option>
<option value=”2″>Quận 2</option>
</select>’;
} else {
echo ‘<select name=”huyen” id=”huyen”>
<option value=”0″>–Chọn huyện–</option>
<option value=”tu”>Tân Uyên</option>
<option value=”ta”>Thuận An</option>
</select>’;
}
?>

– Bước 2:
+ Xong bước 1, vẫn bình thường đúng không? Chưa có gì phức tạp hết.
+ Công việc tiếp theo là làm sao, khi người dùng nhấn vào select tỉnh, ta lập tức gửi ngầm cái id của nó về cho trang ajax_huyen.php
+ Ta sẽ dùng ứng dụng ajax để làm xử lý vấn đề này. Để cho ngắn gọn tôi sẽ viết ajax trên thư việc jquery, bạn download thư viện jquery tại đây nhé.

– Bước 3:
+ Bạn mở file index.php lên, và link nó đến thư viện jquery vừa down lúc nảy.

<script language=”javascript” src=”jquery/jquery-1.5.1.js”></script>

Bạn đặt nó sau thẻ title nhé (nhớ kiểm tra tên file, và đường dẫn cho chính xác)

– Bước 4: gắn sự kiện cho select tỉnh

<script language=”javascript”>
$(document).ready(function() {
$(‘#tinh’).change(function() {
giatri = this.value;
$(‘#shuyen’).load(‘ajax_huyen.php?id_tinh=’ + giatri);
});
});
</script>

+ Bạn để đoạn code này sau dòng khai báo ở bước 3 nhé
+ Đoạn code này có nghĩa là:  khi có sự thay đổi trên select tỉnh, lập tức ta lấy giá trị vừa chọn gắn vào biến giatri, sau đó load lại nội dung cho thẻ span có id là shuyen, nội dung đổ vào cho thẻ shuyen sẽ lấy từ file ajax_huyen.php

Nguồn : laptrinhwebpro .

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s