Hướng dẫn
Quảng cáo

Edit/Update/Delete dữ liệu trong PHP & MySQL bằng Ajax

Hướng dẫn cách chỉnh sửa, cập nhật dữ liệu với Bootstrap Modal hoặc xóa dữ liệu trong PHP & MySQL bằng Ajax thông qua ví dụ cụ thể

Như ở bài trước Ví dụ về PHP & MySQL AJAX Sử dụng jQuery mình đã hướng dẫn các bạn thêm mới và hiển thị danh sách nhân viên bằng Ajax, trong bài viết này mình sẽ hướng dẫn các bạn thêm các chức năng: Lấy thông tin nhân viên hiển thị bằng Bootstrap Modal, sau khi chỉnh sửa thông tin thì cập nhật lại thông tin nhân viên và cuối cùng là chức năng xóa nhân viên khỏi danh sách.

Tập tin index.html

Trong nội dung tập tin này có một số thay đổi so với ví dụ trước như thêm các hàm JS: get(); Lấy dữ liệu nhân viên hiển thị lên modal.update(); Cập nhật dữ liệu nhân viên, trong hàm all() có thêm nút sửa, xóa vào trong danh sách nhân viên ... các bạn đọc kỹ và so sánh với bài trước để thấy sự thay đổi nhé. Nội dung tập tin index.html như bên dưới.

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>
<!-- Modal hiển thị thông tin nhân viên để chỉnh sửa -->
	<div class="modal" id="edit-employee-modal">
	  	<div class="modal-dialog">
		    <div class="modal-content">

		      	<!-- Modal Header -->
		      	<div class="modal-header">
			        <h4 class="modal-title">Chỉnh sửa nhân viên</h4>
			        <button type="button" class="close" data-dismiss="modal">&times;</button>
		      	</div>

		      	<!-- Modal body -->
		      	<div class="modal-body">
		        	<form action="update.php" id="edit-form">
		        		<input class="form-control" type="hidden" name="id">
				    	<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="btnUpdateSubmit">Cập nhật</button>
					  	<button type="button" class="btn btn-danger float-right" data-dismiss="modal">Đóng</button>
					</form>


		      	</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 += "<button class='btn btn-sm btn-primary mt-2' data-toggle='modal' data-target='#edit-employee-modal' data-id='"+value.id+"'>Sửa</button>";
					html += "<button class='btn btn-sm btn-danger mt-2 btn-delete-employee' data-id='"+value.id+"'>Xóa</button>";
					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();
}

function get() 
{
	$(document).delegate("[data-target='#edit-employee-modal']", "click", function() {

		var employeeId = $(this).attr('data-id');

		// Cài đặt Ajax
		$.ajax({
	        type: "GET", //Sử dụng phương thức get
	        url: 'get.php', // địa chỉ nhận dữ liệu
	        data: {employee_id:employeeId}, //thiết lập dữ liệu
	        beforeSend: function () {
	            
	        },
	        success: function (response) {//kết quả sẽ được trả về tại đây
	            response = JSON.parse(response);
	            $("#edit-form [name=\"id\"]").val(response.id);
	            $("#edit-form [name=\"email\"]").val(response.email);
	            $("#edit-form [name=\"name\"]").val(response.name);
	            $("#edit-form [name=\"salary\"]").val(response.salary);
	            $("#edit-form [name=\"address\"]").val(response.address);
	        }
	    });
	});
}

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

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

	            all();

	            // Thông báo kết quả
	            alert(response);

	            resetForm(form);

	            // Đóng modal
	            $('#edit-employee-modal').modal('toggle');
	        },
	        error: function (XMLHttpRequest, textStatus, errorThrown) {
	        	// Thông báo lỗi
	        }
	    });
	});
}
function del() 
{
	$(document).delegate(".btn-delete-employee", "click", function() {

		if (confirm("Bạn có chắc chắn muốn xóa dữ liệu nhân viên này?")) {
		    var employeeId = $(this).attr('data-id'); //lấy ID nhân viên

		    // Cài đặt Ajax
			$.ajax({
		        type: "GET", 
		        url: 'delete.php',
		        data: {employee_id:employeeId}, 
		        beforeSend: function () {
		            
		        },
		        success: function (response) {
	            	all();

		            alert(response)
		        }
		    });
		}
	});
}
$(document).ready(function() {

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

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

	// Lấy dữ liệu nhân viên hiển thị lên modal
	get();
	 
	// Cập nhật dữ liệu nhân viên
	update();
	// Xóa dữ liệu bằng Ajax
	del();
	 
});		
	</script>

</body>
  
</html>

Tập tin get.php

Lấy thông tin của một nhân viên cụ thể để hiển thị lên modal thông qua Ajax

Ví dụ

<?php
$request = $_REQUEST;
$employeeId = $request['employee_id'];

$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 WHERE id='" . $employeeId . "'";

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

$row = $results->fetch_assoc();

$results->free_result();

$mysqli->close();

echo json_encode($row);
?>

Tập tin update.php

Cập nhật thông tin một nhân viên vừa chỉnh sửa trong biểu mẫu modal

Ví dụ

<?php
$request = $_REQUEST;
$id = $request['id']; //ID của nhân viên chúng ta đã sử dụng để lấy thông tin
$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();
}

$sql = "UPDATE nhanvien SET email='" . $email . "', name='" . $name . "', salary='" . $salary . "', address='" . $address . "' WHERE id='" . $id . "'";

if ($mysqli->query($sql)) {
	echo "Nhân viên đã được cập nhật thành công.";
} else {
	return "Error: " . $sql . "<br>" . $mysqli->error;
}

$mysqli->close();
?>

Tập tin delete.php

Xóa bản ghi nhân viên sau khi nhấp vào nút xóa trong danh sách nhân viên

Ví dụ

<?php
$request = $_REQUEST;
$id = $request['employee_id']; //ID của nhân viên chúng ta đã sử dụng để lấy thông tin

$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 = "DELETE FROM nhanvien WHERE id='" . $id . "'";

if ($mysqli->query($sql)) {
	echo "Nhân viên đã được xóa thành công.";
} else {
	return "Error: " . $sql . "<br>" . $mysqli->error;
}

$mysqli->close();
?>

Đến đây chúng tôi đã hướng dẫn cho các bạn cách thêm mới, hiển thị, chỉnh sửa, cập nhật, xóa dữ liệu trong CSDL bằng PHP Ajax sử dụng jQuery. Hy vọng bài viết mang lại cho các bạn thêm một chút hiểu biết về Ajax PHP

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

Bài viết mới

Advertisements