AJAX
AJAX không phải là 1 ngôn ngữ lập trình
AJAX là 1 kĩ thuật dùng trong web động mà ko phải load lại trang (F5)
AJAX là thể hiện của JS bất đồng bộ và (XML)
-CDN jQuery: https://code.jquery.com/jquery-3.5.1.min.js
ví dụ 1, sử dụng hàm onload thông thường, mặc định method được gửi lên là GET, ko có nhiều tùy chỉnh, gồm có 2 file a1.html và a1.php
a1.html có nhiệm vụ bắt sự kiện onkeyup khi người dùng nhập liệu vào input, chuỗi dữ liệu t=string sẽ được gửi lên file a1.php, tại đây hàm isset sẽ lấy t=string gán vào biến $tensach, rồi thực hiện câu truy vấn lên database bookstorevn, kết quả trả về là $data sẽ được duyệt bằng vòng lặp foreach load dữ liệu về div có id=kq trong a1.html. Cấu trúc file như sau:
a1.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function F(v){
$("#kq").load('a1.php?t='+v);
}
</script>
</head>
<body>
<input type="text" onkeyup="F(this.value)">
<div id="kq"></div>
</body>
a1.php
<?php
$tensach=isset($_GET['t'])?$_GET['t']:"";
$o = new PDO("mysql:host=localhost; dbname=bookstorevn", 'root', '');
$o->query('set names utf8');
$sql="select * from sach where tensach like '%$tensach%'";
$stm = $o->query($sql);
$data = $stm->fetchAll();
foreach($data as $k=>$v)
{
echo $v['masach'].":".$v['tensach']."<br>";
}
ví dụ 2, có nhiều thiết lập tùy chỉnh về phương thức gửi GET/POST, kết quả trả về có success hay không?...gồm các tham số url, type, data, success
cấu trúc file a2.html
<body>
<script>
function F2(v)
{
$.ajax({
url:'a2.php',
type:'GET', // hoặc' POST'
data:"t="+v,
success:function(kq)
{
$("#kqtv").html(kq);
}
});
}
</script>
<input type="text" onkeyup="F2(this.value)">
<div id="kqtv"></div>
</body>
cấu trúc file a2.php
<?php
$tensach=isset($_GET['t'])?$_GET['t']:"";
$o = new PDO("mysql:host=localhost; dbname=bookstorevn", 'root', '');
$o->query('set names utf8');
$sql="select * from sach where tensach like '%$tensach%'";
$stm = $o->query($sql);
$data = $stm->fetchAll();
foreach($data as $k=>$v)
{
echo $v['masach'].":".$v['tensach']."<br>";
}
Sử dụng JSON trong ajax
Khi truy vấn database, kết quả trả về của $data là 1 mảng 2 chiều, lưu thông tin sách. Ta dùng lệnh json_encode($data) để chuyển thành mảng json, từ mảng json ta dùng lệnh json.parse để chuyển thành javascript object, dùng hàm của jQuery là $.each() để duyệt qua các phần tử của javascript object để xuất ra kết quả.
Kham khảo hàm $.each() tại đây: https://api.jquery.com/jquery.each/
file html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function F()
{
$.ajax( {
url:'vd02.php',
type:'GET',
success:function(s)
{
oJson = JSON.parse(s);
$.each(oJson, function(k, v){
//alert(k+", " + v.masach);
s ="<div>"+ k+": "+ v.masach +", "+ v.tensach+ ", "+ v.gia +" </div>";
if (v.gia<50000)
{
tam = $("#kq1").html() + s;
$("#kq1").html( tam );
}
else {
$("#kq2").append(s);
}
})
}
}
);
}
$(document).ready(
function(){
F();
}
);
</script>
</head>
<body>
<div id="kq1"></div>
<hr>
<div id="kq2"></div>
</body>
</html>
file php
<?php
$o = new PDO("mysql:host=localhost; dbname=bookstorevn", "root", '');
$o->query("set names utf8");
$sql="select masach, tensach, gia from sach";
$stm= $o->query($sql);
$data = $stm->fetchAll(PDO::FETCH_ASSOC);
print_r($data);
echo json_encode($data);
No comments:
Post a Comment