Quảng cáo

Ví dụ về PHP & MySQL AJAX Sử dụng jQuery

Bài viết sẽ hướng dẫn các bạn cách sử dụng jQuery trong PHP & MySQL AJAX từng bước chi tiết thông quá ví dụ cụ thể.

Tại sao chúng ta cần sử dụng AJAX?
AJAX có thể giúp chúng ta giao tiếp với máy chủ từ giao diện người dùng mà không cần tải lại trang của chúng ta và giúp giảm chi phí băng thông máy chủ và cải thiện trải nghiệm người dùng.

Một số trang web lớn như Google, Youtube, Facebook và nhiều trang web khác đều sử dụng kỹ thuật này, vì vậy nếu bạn là một nhà phát triển web thì bạn nên học AJAX.
Trong hướng dẫn này, chúng tôi sẽ triển khai ví dụ PHP & MySQL AJAX bằng cách sử dụng Thư viện JQuery với các bản ghi Lưu & hiển thị danh sách nhân viên đơn giản để chúng ta kiểm tra phương pháp POST & GET AJAX.

Bảng cơ sở dữ liệu

Trong hướng dẫn này chúng ta sẽ sử dụng bảng CSDL như bài Kết hợp jQuery Datatables Ajax PHP và MySQL (PDO) để lưu và hiển thị danh sách nhân viên.

Tập tin index.html

Tập tin có chứa các mã HTML và JS các bạn có thể đọc kỹ để hiểu các câu lệnh qua các chú thích.

Ví dụ

<!doctype html>
<html lang="en">
<head>
  	<title>Ví dụ về PHP & MySQL AJAX Sử dụng jQuery</title>

  	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  	
  	<!-- Page CSS -->
  	<style type="text/css">
		.list-email {
			font-style: italic;
		}

		.list-address {
			margin-top: -14px;
		    margin-bottom: 0px;
		    font-size: 12px;
		}  		
  	</style>
</head>
  
<body>
   
	<div class="container">

		<br><br>

	    <h1>Ví dụ về PHP & MySQL AJAX Sử dụng jQuery</h1>

	    <br><br>
	    
	    <div class="row">
	    	<div class="col-md-4">
	    		<h3>Thêm nhân viên mới</h3>

			    <form action="save.php" id="form">
			    	<div class="form-group">
					    <label for="email">Email</label>
					    <input class="form-control" type="text" name="email">
				  	</div>
				  	<div class="form-group">
					    <label for="name">Họ và tên</label>
					    <input class="form-control" type="text" name="name">
				  	</div>
				  	<div class="form-group">
					    <label for="salary">Lương</label>
					    <input class="form-control" type="text" name="salary">
				  	</div>
				  	<div class="form-group">
					    <label for="address">Địa chỉ</label>
					    <textarea class="form-control" type="text" name="address" rows="3"></textarea>
				  	</div>
				  	<button type="button" class="btn btn-primary" id="btnSubmit">Gửi</button>
				</form>
	    	</div>

	    	<div class="col-md-8">
	    		<h3>Danh sách nhân viên</h3>
	    		<div id="employees-list"></div>
	    	</div>
	    </div>
	</div>

	<!-- Nên đặt các tệp javascript ở đây để tải trang nhanh hơn -->
	
	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<!-- Bootstrap JS -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<!-- Page Script -->
	<script type="text/javascript">
function all() 
{
	// Cài đặt Ajax
	$.ajax({
        type: "GET", //Phương thức nhận dữ liệu từ máy chủ
        url: 'all.php', // địa chỉ nhận dữ liệu
        success: function (response) {//dữ liệu được trả về tại đây
            
            // Phân giải kết quả Json
        	response = JSON.parse(response);

            var html = "";
            // Kiểm tra xem có kết quả hay không
            if(response.length) {
            	html += '<div class="list-group">';
	            // Tạo vòng lặp kết quả JSON
	            $.each(response, function(key,value) {
	            	// Danh sách nhân viên
					html += '<a href="#" class="list-group-item list-group-item-action">';
					html += "<p>" + value.name +' ('+ value.salary + ") <span class='list-email'>(" + value.email + ")</span>" + "</p>";
					html += "<p class='list-address'>" + value.address + "</p>";
					html += '</a>';
	            });
	            html += '</div>';
            } else {
            	html += '<div class="alert alert-warning">';
				  html += 'Không có dữ liệu!';
				html += '</div>';
            }

            

            // Hiển thị danh sách nhân viên
			$("#employees-list").html(html);
        }
    });
}

function submitForm() 
{
	$("#btnSubmit").on("click", function() {
		var $this 		    = $("#btnSubmit"); 
        var $caption        = $this.html();
        var form 			= "#form"; 
        var formData        = $(form).serializeArray();
        var route 			= $(form).attr('action'); 

        // Ajax config
    	$.ajax({
	        type: "POST", 
	        url: route, 
	        data: formData, 
	        beforeSend: function () {
	            $this.attr('disabled', true).html("Processing...");
	        },
	        success: function (response) {
	            $this.attr('disabled', false).html($caption);

	            // làm mới danh sách nhân viên
	            all();

	            // Hiển thị danh sách nhân viên
	            alert(response);

	            // Làm mới biểu mẫu nhập dữ liệu
	            resetForm();
	        },
	        error: function (XMLHttpRequest, textStatus, errorThrown) {
	        	// Thông báo lỗi
	        }
	    });
	});
}

function resetForm() 
{
	$('#form')[0].reset();
}


$(document).ready(function() {

	// Lấy danh sách nhân viên
	all();

	// Sử dụng AJAX để gửi biểu mẫu
	submitForm();
	 
});		
	</script>

</body>
  
</html>

Ý nghĩa của các hàm trong mã JS

all() - lấy tất cả hồ sơ nhân viên qua AJAX
submitForm() - sử dụng để lưu trữ hồ sơ nhân viên qua AJAX
resetForm() - sử dụng để đặt lại biểu mẫu sau khi tạo thành công nhân viên

Tập tin all.php

Tập tin hiển thị danh sách nhân viên từ CSDL.

Ví dụ

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demophp";

$mysqli = new mysqli($servername, $username, $password, $dbname);

if ($mysqli->connect_errno) {
	echo "Failed to connect to MySQL: " . $mysqli->connect_error;
	exit();
}

$sql = "SELECT * FROM nhanvien";

$results = $mysqli->query($sql);

$row = $results->fetch_all(MYSQLI_ASSOC);

$results->free_result();

// Đóng kết nối
$mysqli->close();

echo json_encode($row);
?>

Tập tin save.php

Tập tin nhận dữ liệu từ biểu mẫu và lưu trữ dữ liệu nhân viên mới nhập vào CSDL

Ví dụ

<?php
$request = $_REQUEST;
$email = $request['email'];
$name = $request['name'];
$salary = $request['salary'];
$address = $request['address'];

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demophp";

$mysqli = new mysqli($servername, $username, $password, $dbname);

if ($mysqli->connect_errno) {
	echo "Failed to connect to MySQL: " . $mysqli->connect_error;
	exit();
}

// Set the INSERT SQL data
$sql = "INSERT INTO nhanvien (email, name, salary, address)
	VALUES ('" . $email . "', '" . $name . "', '" . $salary . "', '" . $address . "')";

if ($mysqli->query($sql)) {
	echo "Nhân viên được thêm thành công.";
} else {
	return "Lỗi: " . $sql . "<br>" . $mysqli->error;
}

$mysqli->close();
?>

Hy vọng trong Ví dụ AJAX này, bạn sẽ có được thêm một chút kiến thức để sử dụng AJAX bằng jQuery.

Với ví dụ trên thì chưa hoàn toàn tốt để có thể sử dụng thực tế trên các trang web, nếu bạn muốn sử dụng chúng trên các dự án của mình thì bạn cần chú ý thêm mấy vấn đề sau:

Thêm xác thực biểu mẫu
Thêm yêu cầu chống giả mạo (CSRF)
Ngăn chặn khỏi SQL Injection
Xác thực email nếu đúng định dạng và email chưa tồn tại trong cơ sở dữ liệu của chúng tôi
Yêu cầu người dùng đăng nhập để người dùng đã đăng nhập có thể thêm nhân viên (Hệ thống đăng nhập MySQL PHP hoặc Mẫu code đăng nhập bằng PHP với kết nối PDO.)

Bài viết này đã giúp ích cho bạn?

Bài viết mới

Bài trước Bài tiếp

Ví dụ về PHP & MySQL AJAX Sử dụng jQuery

Bảng cơ sở dữ liệu

Tập tin index.html

Ví dụ

Tập tin all.php

Ví dụ

Tập tin save.php

Ví dụ

Bài viết này đã giúp ích cho bạn?

Bài viết mới

Về chúng tôi

Liên hệ

Các công cụ