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">×</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