- Trang chủ
- Phát triển web
- Javascript
- Tích hợp Sweetalert 2 trong PHP & MySQL bằng Ajax
Hướng dẫn cách tích hợp Sweetalert 2 trong PHP & MySQL bằng Ajax thông qua ví dụ cụ thể
Trong các bài trước Ví dụ về PHP & MySQL AJAX Sử dụng jQuery và Edit/Update/Delete dữ liệu trong PHP & MySQL bằng Ajax các thông báo hiển thị chúng ta đều sử dụng alert để thông báo, cảnh báo. Trong hướng dẫn này, mình sẽ chỉ cho bạn cách tích hợp sweetalert 2 trong PHP & MySQL bằng Ajax. Sweet alert 2 cho phép chúng ta tùy chỉnh hộp cảnh báo trong các ứng dụng web của chúng ta và giao diện thật tuyệt vời khiến nhiều nhà phát triển yêu thích nó. Vì vậy, trong bài viết này, mình sẽ chia sẻ cách tích hợp nó dễ dàng vào các ứng dụng của chúng ta.
Tập tin index.html
Thêm các tập tin css và js của Sweetalert 2 vào trong tập tin index.html của chúng ta ở các ví dụ trước. Dưới đây là mã đầy đủ của mình:
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ông báo nhân viên thêm mới thành công
// alert[response];
Swal.fire[{
icon: 'success',
title: 'Thành công.',
text: 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];
Swal.fire[{
icon: 'success',
title: 'Thành công.',
text: 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]
}
}];
}*/
Swal.fire[{
icon: 'warning',
title: 'Bạn có chắc chắn muốn xóa dữ liệu nhân viên này?',
showDenyButton: false,
showCancelButton: true,
confirmButtonText: 'Yes'
}].then[[result] => {
/* Read more about isConfirmed, isDenied below */
if [result.isConfirmed] {
var employeeId = $[this].attr['data-id'];
// Ajax config
$.ajax[{
type: "GET",
url: 'delete.php',
data: {employee_id:employeeId},
beforeSend: function [] {
},
success: function [response] {
all[];
Swal.fire['Thành công.', response, 'success']
}
}];
} else if [result.isDenied] {
Swal.fire['Thay đổi không được lưu', '', 'info']
}
}];
}];
}
$[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[];
}];
Trong đó các bạn có thể thấy tất cả các cảnh báo [alert] thành công mình đều đã thay đổi thành:
Ví dụ
Trong đó các bạn có thể thấy tất cả các cảnh báo [alert] thành công mình đều đã thay đổi thành: Thông báo cũ
Swal.fire[{
icon: 'success',
title: 'Thành công.',
text: response
}];alert[response];Thông báo mớiThông báo cũ
function del[]
{
$[document].delegate[".btn-delete-employee", "click", function[] {
Swal.fire[{
icon: 'warning',
title: 'Bạn có chắc chắn muốn xóa dữ liệu nhân viên này?',
showDenyButton: false,
showCancelButton: true,
confirmButtonText: 'Yes'
}].then[[result] => {
if [result.isConfirmed] {
var employeeId = $[this].attr['data-id'];
// Ajax config
$.ajax[{
type: "GET",
url: 'delete.php',
data: {employee_id:employeeId},
beforeSend: function [] {
},
success: function [response] {
all[];
Swal.fire['Thành công.', response, 'success']
}
}];
} else if [result.isDenied] {
Swal.fire['Thay đổi không được lưu', '', 'info']
}
}];
}];
}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]
}
}];
}
}];
}Và với chắc năng xóa nhân viên thì mã js đã được thay đổi như dưới.