Sử dụng Ajax chèn vào web
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (66.29 KB, 4 trang )
Sử dụng Ajax chèn vào web
Dùng ajax gởi dữ liệu đến file xuly.php kiểm tra thông tin đăng nhập có đúng hay không. Sau đó
trả kết quả lại trang đăng nhập. Xóa toàn bộ nội dung ở form có id là FORM, thay vào đó là dòng
chữ thông báo đăng nhập thành công hay thất bại
Bài TUT này hướng dẫn dùng phuong thức POST để truyền dữ liệu
Chúng ta có hàm như sau
$.post( 'file để gởi dữ liệu tới',{ các biến và giá trị của nó gới tới file đó}, xữ lỹ két quà trả về );
Ví dụ nhé
Mình gởi dữ liệu đến file process.php có 2 biến
1. Một là biến act có giá trị là run
2. Hai là biến task có giá trị là stop
và dữ liệu trả về là khung Alert lên dòng chữ Gỏi dữ liệu thành công
COde này :
$.post( 'process.php',
{act: 'run',task: 'stop' },
function (data)
{
alert("Gởi dữ liệu thành công");
}
);
Cách thực hiện :
Tạo file index.php với nội dung
<?php
header("Content-type: text/html; Charset=UTF-8");
?>
<head>
<!-- Tải file jquery để sử dụng Ajax -->
<script language="Javascript" src="./jquery-1.4.3.js"></script>
<!-- Đoạn code gởi và nhận dữ liệu -->
<script language="Javascript">
function login()
{
// Lấy username và password từ Form
// Chú ý trong HTML bạn đặt tên cho input phải đặt là id=" " , ko đặt bằng name=" "
var username = $("#username").val();
var password = $("#password").val();
// Kiểm tra đã nhập đầy đủ 2 thông tin đó chứa
if ( username == '' || password == '' )
{
// HIện khung thông báo chưa nhập đầy đủ thông tin
alert("Vui lòng nhập đầy đủ thông tin");
}
else
{
// Đoạn code Ajax là ở đây
// Mình dùng phương thức post
$.post
(
'./xuly.php', // Truyền thông tin đến file xuly.php.
{
//Mình truyền 2 biến đến khi xuly.php ( là biến username và biến password )
// Với giá trị username và password tương ứng mình đã lấy từ Form lúc nãy
// Còn thêm 1 biến act với giá trị là login, dùng để xác định yêu cầu trong file xuly.php . Đoạn này
xem tiếp file xuly.php sẽ hiểu
act :'login',
username :username,
password : password
},
// Đây là đoạn code nhận dữ liệu
// Nếu đăng nhập thành công, thì sẽ xóa đi toàn bộ khung đăng nhập, và thay vào đó
// Là dòng chữ " Đăng nhập thành công"
function (data)
{
alert("132");
}
);
}
}
</script>
</head>
<div id="form">
Tài khoản: <input type="text" id="username" value="">
<br />
Mật khẩu <input type="password" id="password" value="">
<br />
<input type="button" onClick="login();" value="Đăng nhập">
</div>
File xuly.php với nội dung:
<?php
// Kiểm tra yêu cầu gởi đến
// Nếu gởi đến biến act = login thì thực hiện lệnh kiểm tra password
// Do code ajax mình dùng phương thức POST nên mình sẽ kiểm tra dieu kiện với phương thức
$_POST
if ( $_POST['act'] == 'login' )
{
$username = $_POST['username']; // Lấy username do code ajax gởi tới
$password = $_POST['password']; // Lấy password do code ajax gởi tới
// kiểm tra passsword
if ( $username == 'test' && $password == 'test' )
{
echo " Đăng nhập thành công";
// Đây chính là data trong cái $("#form).html(data) đấy.
// Dòng chữ Đăng nhập thành công sẽ thay vào chỗ data trong $("#form).html(data)
}
else
{
echo "Đăng nhập thất bại";
}
}
?>
Tải file jquery bỏ vào chung thư mục với 2 file đó:
