Kỹ thuật Sử dụng Ajax chèn vào web
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ạiBài TUT này hướng dẫn dùng phuong thức POST để truyền dữ liệuChú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ến1. Một là biến act có giá trị là run2. Hai là biến task có giá trị là stopvà dữ liệu trả về là khung Alert lên dòng chữ Gỏi dữ liệu thành côngCOde 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<?phpheader("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ứaif ( username == '' || password == '' ){// HIện khung thông báo chưa nhập đầy đủ thông tinalert("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ểuact :'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 $_POSTif ( $_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 passswordif ( $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 đó: http://code.jquery.com/jquery-1.4.3.js . 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. text/html; Charset=UTF-8");?><head><!-- Tải file jquery để sử dụng Ajax --><script language="Javascript" src="./jquery-1.4.3.js"></script><!--