Làm cách nào để tạo cảnh báo ngọt ngào trong PHP?
Được đăng ban đầu @ https. // mã và triển khai. com truy cập và tải xuống mã mẫu. https. // mã và triển khai. com/blog/php/integrate-sweetalert-2-in-php-mysql-using-ajax
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tích hợp sweetalert 2 trong PHP & MySQL bằng Ajax. Cảnh báo ngọt ngào 2 cho phép chúng tôi tùy chỉnh hộp cảnh báo trong các ứng dụng web của mình 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, tôi sẽ chia sẻ cách tích hợp nó dễ dàng vào các ứng dụng của chúng tôi
Tạo chỉ mục HTML
Vì vậy, trước tiên hãy bắt đầu bằng cách tạo tệp index.html
của chúng tôi. Xem mã dưới đây
Integrate Sweetalert 2 In PHP & MySQL Using Ajax
Integrate Sweetalert 2 In PHP & MySQL Using Ajax
Add New Employee
Email
First Name
Last Name
Address
Submit
List of Employees
Edit Employee
×
Email
First Name
Last Name
Address
Update
Close
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Như bạn có thể thấy ở trên, chúng tôi đã nhập javascript và kiểu Sweetalert2
Triển khai Sweetalert với Lưu bản ghi bằng Ajax?
Vì vậy, trong các hướng dẫn trước của chúng tôi, chúng tôi chỉ sử dụng cảnh báo javascript gốc sau khi tạo thành công bản ghi. Như bạn có thể thấy bên dưới ảnh chụp màn hình
Vì vậy, chúng tôi sẽ thay thế nó ngay bây giờ bằng thiết kế tuyệt vời của sweetalert2. Vui lòng kiểm tra mã dưới đây để biết ai sẽ làm điều đó
function save[]
{
$["#btnSubmit"].on["click", function[] {
var $this = $[this]; //submit button selector using ID
var $caption = $this.html[];// We store the html content of the submit button
var form = "#form"; //defined the #form ID
var formData = $[form].serializeArray[]; //serialize the form into array
var route = $[form].attr['action']; //get the route using attribute action
// Ajax config
$.ajax[{
type: "POST", //we are using POST method to submit the data to the server side
url: route, // get the route value
data: formData, // our serialized array data for server side
beforeSend: function [] {//We add this before send to disable the button once we submit it so that we prevent the multiple click
$this.attr['disabled', true].html["Processing..."];
},
success: function [response] {//once the request successfully process to the server side it will return result here
$this.attr['disabled', false].html[$caption];
// Reload lists of employees
all[];
// We will display the result using alert
Swal.fire[{
icon: 'success',
title: 'Success.',
text: response
}];
// Reset form
resetForm[form];
},
error: function [XMLHttpRequest, textStatus, errorThrown] {
// You can put something here if there is an error from submitted request
}
}];
}];
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Trong chức năng lưu của chúng tôi ở trên, bạn sẽ thấy một mã bắt đầu bằng Swal.fire
bên trong thành công ajax. Như bạn có thể thấy bên dưới
Swal.fire[{
icon: 'success',
title: 'Success.',
text: response
}];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bây giờ vì chúng tôi đã thêm sweetalert2 nên nếu chúng tôi lưu một bản ghi mới, hộp cảnh báo sẽ xuất hiện như hình bên dưới
Vì chúng tôi đã triển khai cái cơ bản. Tiếp theo, chúng tôi sẽ triển khai hộp thoại Xác nhận loại sweetalert 2
Triển khai Loại hộp thoại Sweetalert với Ajax Delete trên PHP & MySQL
Dưới đây là mã ví dụ về loại hộp thoại sweetalert 2 mà chúng ta sẽ sử dụng để xác nhận việc xóa bản ghi
Swal.fire[{
icon: 'warning',
title: 'Are you sure you want to delete this record?',
showDenyButton: false,
showCancelButton: true,
confirmButtonText: 'Yes'
}].then[[result] => {
/* Read more about isConfirmed, isDenied below */
if [result.isConfirmed] {
//action here
}
}];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Vì bạn có mã mẫu về, tiếp theo chúng tôi sẽ giải quyết toàn bộ mã về cách triển khai mã đó với xóa ajax. Vui lòng kiểm tra mã dưới đây
function del[]
{
$[document].delegate[".btn-delete-employee", "click", function[] {
Swal.fire[{
icon: 'warning',
title: 'Are you sure you want to delete this record?',
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", //we are using GET method to get data from server side
url: 'delete.php', // get the route value
data: {employee_id:employeeId}, //set data
beforeSend: function [] {//We add this before send to disable the button once we submit it so that we prevent the multiple click
},
success: function [response] {//once the request successfully process to the server side it will return result here
// Reload lists of employees
all[];
Swal.fire['Success.', response, 'success']
}
}];
} else if [result.isDenied] {
Swal.fire['Changes are not saved', '', 'info']
}
}];
}];
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Được rồi, bây giờ bạn đã sẵn sàng triển khai cảnh báo ngọt ngào 2 với dự án của mình. Vì vậy, đã đến lúc xem xét các hành động thực tế của mã này. Tôi hy vọng hướng dẫn này có thể giúp bạn. Vui lòng truy cập tại đây https. // mã và triển khai. com/blog/php/integrate-sweetalert-2-in-php-mysql-using-ajax nếu bạn muốn tải xuống mã này
Làm cách nào để sử dụng cảnh báo ngọt ngào trong mã PHP?
Để sử dụng nó trong php, bạn có thể sử dụng đoạn mã sau. Đầu tiên, bạn phải đưa vào thư viện sweetalert như tôi đã đưa vào. Sau đó, bạn có thể sử dụng cảnh báo ngọt ngào như tôi đã sử dụng trong tiếng vang . Sweetalert không tải cho đến khi các phần tử dom được tải.
Tại sao hộp cảnh báo của tôi không hoạt động trong PHP?
PHP không hỗ trợ hộp thông báo cảnh báo vì đây là ngôn ngữ phía máy chủ nhưng bạn có thể sử dụng mã JavaScript trong phần thân PHP để .
Swal trong JavaScript là gì?
Có 4 cái được xác định trước. "cảnh báo", "lỗi", "thành công" và "thông tin". swal[ "Làm tốt lắm. ", " Bạn đã nhấp vào nút. ", " thành công"]; Xem trước.