- Trang chủ
- Phát triển web
- PHP
- 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ụ
Ví dụ về PHP & MySQL AJAX Sử dụng jQuery
.list-email {
font-style: italic;
}
.list-address {
margin-top: -14px;
margin-bottom: 0px;
font-size: 12px;
}
Ví dụ về PHP & MySQL AJAX Sử dụng jQuery
Thêm nhân viên mới
Email
Họ và tên
Lương
Địa chỉ
Gửi
Danh sách nhân viên
Chỉnh sửa nhân viên
×
Email
Họ và tên
Lương
Địa chỉ
Cập nhật
Đóng
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 += '';
// Tạo vòng lặp kết quả JSON
$.each[response, function[key,value] {
// Danh sách nhân viên
html += '';
html += "" + value.name +' ['+ value.salary + "] [" + value.email + "]" + "
";
html += "" + value.address + "
";
html += "Sửa";
html += "Xóa";
html += '';
}];
html += '';
} else {
html += '';
html += 'Không có dữ liệu!';
html += '';
}
// 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[];
}];
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ụ