Ajax là gì ? Sử dụng Ajax trong PHP – Kungfu PHP

Posted on by mtoplistChuyên mục:Top List

1. Ajax là gì ?

Định nghĩa từ wikipedia :

Ajax (asynchronous JavaScript and XML) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required (JSON is often used in the AJAJ variant), and the requests do not need to be asynchronous.

Về ajax là gì thì các bạn có thể search trên google với từ khóa “ajax” sẽ cho ra hàng nghìn kết quả. Trong phạm vi bài viết này mình không đi sâu về giải thích khái niệm ngữ nghĩa của nó. Mà mình tập trung vào demo cho các bạn thấy sự kết hợp giữa Ajax và PHP. Nhưng mình cũng xin đưa ra một định nghĩa cá nhân (có thể không đẩy đủ) nhưng có thể sẽ giúp các bạn dễ hiểu hơn.

Ajax là bộ máy trung gian, xử lý tương tác dữ liệu giữa client và server, với dữ liệu trả về từ server có thể là json, xml, text,….Ajax là cách mà chúng ta xử lý dữ liệu tại một số phần nhỏ trên ứng dụng web mà không cần phải load lại toàn bộ trang web, giúp cho người dùng có trải nghiệm website thú vị hơn, mượt hơn…bla…bla..bla 🙂

2. Sử dụng Ajax trong PHP (Ajax jQuery)

Để các bạn dễ hình dung cách sử dụng ajax trong php, mình sẽ lấy ví dụ là tạo form đăng ký đơn giản với ajax và PHP

1. Tạo file xử lý client ajax.php

Đầu tiên, các bạn tạo 1 file đặt tên là ajax.php (bạn có thể đặt tên file tùy ý, không nhất thiết phải là ajax.php nhé !). Trong file này các bạn gõ code như dưới đây để tạo ra một form đăng ký đơn giản bao gồm : tên đăng nhập, mật mã, địa chỉ email, tuổi, giới tính, ngày sinh

<html>
<head>
	<title>Sử dung Ajax trong PHP</title>
	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
	<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<meta charset="UTF-8">
</head>
<body>
	<form id="fr_form" name="fr_form">
		<table width="50%">
			<tr><td>Tên đăng nhập<td><td><input type="text" name="username"></td></tr>
			<tr><td>Mật mã<td><td><input type="password" name="password"></td></tr>
			<tr><td>Địa chỉ email<td><td><input type="text" name="email"></td></tr>
			<tr>
				<td>Giới tính<td>
				<td>
					<input type="radio" name="sex" value="male">Nam <input type="radio" name="sex" value="female">Nữ
				</td>
			</tr>
			<tr>
				<td>Tuổi<td>
				<td>
					<select name="age">
						<?php for ($age=10; $age <= 150 ; $age++) { ?>
							<option value="<?php echo $age; ?>"> <?php echo $age; ?> </option>
						<?php } ?>
						
					</select>
				</td>
			</tr>
			<tr><td>Ngày sinh<td><td><input type="text" name="birthday"></td></tr>
			<tr><td>&nbsp;<td><td><input type="button" id="btn_register" name="btn_register" value="Đăng ký"></td></tr>
		</table>	
	</form>

</body>
</html>

Các bạn lưu ý là ở bài viết này mình sử dụng jquery.ajax() , nên các bạn phải include 2 dòng gọi tới thư viện jquery này trong thẻ <head></head> nhé :

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

OK, giờ thi chạy file ajax.php trên trình duyệt bạn sẽ có được giao diên hiển thị như sau :

sử dụng ajax trong php

Công việc tiếp theo của chúng ta đó là khi mà người dùng click vào nút Đăng ký, ta sẽ tiến hành lấy thông tin từ các input như username, password, email,… và gửi vào server để xử lý. Trong file ajax.php, các bạn thêm đoạn code như sau :

<script type="text/javascript">
		$("#btn_register").click(function(){
			$.ajax({
				method: "POST",// phương thức dữ liệu được truyền đi
				url: "show_data.php",// gọi đến file server show_data.php để xử lý
				data: $("#fr_form").serialize(),//lấy toàn thông tin các fields trong form bằng hàm serialize của jquery
				success : function(response){//kết quả trả về từ server nếu gửi thành công
					console.log(response);
				}
			});
		});
		
</script>

Giải thích : Đoạn mã javascript trên chính là mình đang sử dụng jquery.ajax của jquery. Đoạn code này có trách nhiệm là lấy toàn bộ thông tin như username, password, email,… trong form bằng hàm form.serialize() , và gửi đi xuống file phía dưới server là show.data.php để xử lý. Nếu như dữ liệu được gửi thành công, thì trong hàm success sẽ có kết quả trả về được lưu trong tham số response.

2. Tạo file xử lý phía server show_data.php

Trong file này chúng ta sẽ có nội dung như sau :

<?php
if (isset($_POST["username"])) {// kiểm tra nếu người dùng đã ấn nút Đăng ký để gửi thông tin

	$username = $_POST["username"]; // lấy thông tin username

	$password = $_POST["password"]; // lấy thông tin password

	$email = $_POST["email"]; // lấy thông tin email

	$sex = $_POST["sex"]; // lấy thông tin sex

	$age = $_POST["age"]; // lấy thông tin age

	$birthday = $_POST["birthday"]; // lấy thông tin birthday

	echo $username . " | " .$password . " | " .$email . " | " .$sex . " | " .$age . " | " .$birthday ; // xuất dữ liệu lấy được ra cho phía server
	
	//Dưới đây sẽ là những đoạn code xử lý data theo ý bạn
	//Chẳng hạn như lưu data xuống database, kiểm tra data,...
}


?>

Code trong file này khá đơn giản, đó là ta sẽ lấy thông tin gửi từ file ajax.php qua phương thức POST, và tiến hành echo dữ liệu lấy được để kiểm tra xem chúng ta đã lấy được thông tin thành công hay chưa.

Ok, giờ save file này lại. Các bạn vào trình duyệt (nên dùng firefox, có cài plugin firebug để xem kết quả trả về cho rõ), chạy lại file ajax.php vừa nãy, (nhớ ấn inspect element , phím tắt F12 ) điền đầy đủ thông tin và ấn Đăng ký bạn sẽ thấy kết quả trả về như hình dưới đây là các bạn đã thực hành thành công ^_^

ajax trong php

Gợi ý : Bạn là người mới và muốn tìm hiểu về Bitcoin nhưng không biết bắt đầu từ đâu?
Click xem ngay Hướng Dẫn Đầu Tư Bitcoin Cho Người Mới nhé!

 

Kết thúc bài viết Sử dụng Ajax trong PHP, có thắc mắc hay ý kiến gì từ bài viết thì bạn để lại comment bên dưới nhé. Để chúng ta cùng trao đổi, học hỏi, tiến bộ hơn. À, đừng quên Đăng ký bài viết bên thanh sidebar bên trái để nhận các bài viết từ blog Kungfu PHP khi có bài mới nhé.

Thân !

Tôi Là Hoàng Hiếu

Mình là Hiếu.
Người sáng lập ra blog Kungfu PHP chia sẻ mọi thứ về tiền điện tử, mmo, lập trình,…
Một câu nói mà mình rất thích đó là “Cuộc đời chỉ có một, vì thế hãy làm những gì khiến bạn hạnh phúc và ở bên người khiến bạn luôn mỉm cười”.
Hy vọng nơi đây là góc cafe nhỏ để chúng ta có thể trao đổi, cùng nhau phát triển.

►Nếu bạn thấy bài viết bạn đang đọc hữu ích, hãy mời mình một ly cafe nhé : https://kungfuphp.com/donate

mtoplist