AJAX và PHP
Ví dụ ứng dụng AJAX và PHP
Chương này mình sẽ trình bày một ví dụ minh họa cách sử dụng kỹ thuật AJAX trên Client Side và ngôn ngữ PHP trên Server Side.
Trong ví dụ này, khi người dùng gõ một ký tự trong trường input, hàm JavaScript có tên là showHint() sẽ được thực thi. Hàm này được kích hoạt bởi sự kiện onkeyup.
<html>
<body>
<h3>Ban hay nhap mot ten trong truong input ben duoi:</h3>
<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>Suggestion: <span id="txtHint"></span></p>
<script>
function showHint(str) {
var xhttp;
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "gethint.php?q="+str, true);
xhttp.send();
}
</script>
</body>
</html>
Giải thích
Đầu tiên, kiểm tra xem nếu trường input là trống hay không (điều kiện str.length == 0). Nếu là trống thì xóa nội dung của Placeholder và thoát khỏi hàm.
Nếu trường input là không trống, thực hiện:
Tạo một đối tượng XMLHttpRequest.
Tạo một hàm để thực thi khi Response từ Server đã sẵn sàng.
Gửi Request tới một PHP file (giả sử có tên là gethint.php) trên Server.
Bạn nên chú ý rằng tham số q được thêm vào "gethint.php?q=" + str.
Biến str giữ nội dung của trường input.
Nội dung của gethint.php
PHP file này kiểm tra mảng các tên và sau đó trả về tên tương ứng cho trình duyệt.
<?php
// Mot mang cac ten Sinh Vien
$a[] = "An";
$a[] = "Bao";
$a[] = "Chinh";
$a[] = "Doanh";
$a[] = "Em";
$a[] = "Gam";
$a[] = "Hoang";
$a[] = "Kim";
$a[] = "Linh";
$a[] = "Ngoc";
$a[] = "Oanh";
$a[] = "Phuc";
$a[] = "Anh";
$a[] = "Nam";
$a[] = "Sen";
$a[] = "Dong";
$a[] = "Sinh";
$a[] = "Torres";
$a[] = "Ronaldo";
$a[] = "Messi";
$a[] = "Suares";
$a[] = "Morinho";
$a[] = "Van Gan";
$a[] = "Viet";
// Lay tham so q tu dia chi URL
$q = $_REQUEST["q"];
$hint = "";
// Tim tat ca cac hint co trong Array neu tham so $q khac ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
// Ket qua "Khong co suggestion nao" neu khong tim thay bat ky hint nao trong Array
echo $hint === "" ? "Khong co suggestion nao" : $hint;
?>
Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.
Loạt bài hướng dẫn học Ajax cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
