Hướng dẫn sweetalert php mysql - sweetalert php mysql 2022

byỞ Đâu •October 06, 2022

0

Thủ Thuật Hướng dẫn Hướng dẫn sweetalert php mysql – sweetalert php mysql Mới Nhất

Bạn đang tìm kiếm từ khóa Hướng dẫn sweetalert php mysql – sweetalert php mysql được Update vào lúc : 2022-10-06 21:20:26 . Với phương châm chia sẻ Bí quyết Hướng dẫn trong nội dung bài viết một cách Chi Tiết Mới Nhất. Nếu sau khi Read nội dung bài viết vẫn ko hiểu thì hoàn toàn có thể lại phản hồi ở cuối bài để Mình lý giải và hướng dẫn lại nha.

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ụ rõ ràng

Nội dung chính

Tập tin index.html

Với Sweetalert 2 thì những chú ý của bạn nhìn trong nó chuyên nghiệp và thích mắt hơn nhiều!

Bài viết này đã hỗ trợ ích cho bạn?

Trong những bài trước Ví dụ về PHP & MySQL AJAX Sử dụng jQuery và Edit/Update/Delete tài liệu trong PHP & MySQL bằng Ajax những thông báo hiển thị toàn bộ chúng ta đều sử dụng alert để thông báo, chú ý. 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 được cho phép toàn bộ chúng ta tùy chỉnh hộp chú ý trong những ứng dụng web của toàn bộ chúng ta và giao diện thật tuyệt vời khiến nhiều nhà tăng trưởng yêu thích nó. Vì vậy, trong nội dung bài viết này, mình sẽ chia sẻ cách tích hợp nó thuận tiện và đơn thuần và giản dị vào những ứng dụng của toàn bộ chúng ta.

Tập tin index.html

Thêm những tập tin css và js của Sweetalert 2 vào trong tập tin index.html của toàn bộ chúng ta ở những ví dụ trước. Dưới đấy là mã khá đầy đủ của tớ:

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”>

<!– sweetalert2 CSS –>

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.3.3/sweetalert2.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>

<h2>Ví dụ về PHP & MySQL AJAX Sử dụng jQuery</h2>

<form action=”save.php” id=”form”>

<div class=”form-group”>

<label for=”email”>E-Mail</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>

<!– Modal Header –>

<div class=”modal-header”>

<h4 class=”modal-title”>Chỉnh sửa nhân viên cấp dưới</h4>

<button type=”button” class=”close” data-dismiss=”modal”>×</button>

</div>

<!– Modal body toàn thân –>

<div class=”modal-body toàn thân”>

<form action=”update.php” id=”edit-form”>

<input class=”form-control” type=”hidden” name=”id”>

<div class=”form-group”>

<label for=”email”>E-Mail</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 những 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>

<!– sweetalert2 JS –>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.3.3/sweetalert2.min.js”></script>

<!– Page Script –>

<script type=”text/javascript”>

function all()

// Cài đặt Ajax

$.ajax(

type: “GET”, //Phương thức nhận tài liệu từ sever

url: ‘all.php’, // địa chỉ nhận tài liệu

success: function (response) //tài 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 là 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 cấp dưới

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ó tài liệu!’;

html += ‘</div>’;

// Hiển thị list nhân viên cấp dưới

$(“#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 list nhân viên cấp dưới

all();

// Hiển thông báo nhân viên cấp dưới thêm mới thành công xuất sắc

// alert(response);

Swal.fire(

icon: ‘success’,

title: ‘Thành công.’,

text: response

);

// Làm mới biểu mẫu nhập tài 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 tài liệu

data: employee_id:employeeId, //thiết lập tài liệu

beforeSend: function ()

,

success: function (response) //kết quả sẽ tiến hành 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 như đinh muốn xóa tài liệu nhân viên cấp dưới này?”))

var employeeId = $(this).attr(‘data-id’); //lấy ID nhân viên cấp dưới

// 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 như đinh muốn xóa tài liệu nhân viên cấp dưới 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 list nhân viên cấp dưới

all();

// Sử dụng AJAX để gửi biểu mẫu

submitForm();

// Lấy tài liệu nhân viên cấp dưới hiển thị lên modal

get();

// Cập nhật tài liệu nhân viên cấp dưới

update();

// Xóa tài liệu bằng Ajax

del();

);

</script>

</body toàn thân>

</html>

Trong số đó những bạn hoàn toàn có thể thấy toàn bộ những chú ý (alert) thành công xuất sắc mình đều đã thay đổi thành:

Ví dụ

Trong số đó những bạn hoàn toàn có thể thấy toàn bộ những chú ý (alert) thành công xuất sắc 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 như đinh muốn xóa tài liệu nhân viên cấp dưới 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 như đinh muốn xóa tài liệu nhân viên cấp dưới này?”))

var employeeId = $(this).attr(‘data-id’); //lấy ID nhân viên cấp dưới

// 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 cấp dưới thì mã js đã được thay đổi như dưới.

Với Sweetalert 2 thì những chú ý của bạn nhìn trong nó chuyên nghiệp và thích mắt hơn nhiều!

Bài viết này đã hỗ trợ ích cho bạn?

Tải thêm tài liệu liên quan đến nội dung bài viết Hướng dẫn sweetalert php mysql – sweetalert php mysql

programming

php

Echo sweetalert php

Swal timer

Php CRUD sweetalert

Sweet alert w3schools

Sweetalert2

Hướng dẫn sweetalert php mysql - sweetalert php mysql Reply
8
0
Chia sẻ

Chia Sẻ Link Down Hướng dẫn sweetalert php mysql – sweetalert php mysql miễn phí

Bạn vừa Read nội dung bài viết Với Một số hướng dẫn một cách rõ ràng hơn về Clip Hướng dẫn sweetalert php mysql – sweetalert php mysql tiên tiến và phát triển nhất và Chia SẻLink Tải Hướng dẫn sweetalert php mysql – sweetalert php mysql Free.

Giải đáp vướng mắc về Hướng dẫn sweetalert php mysql – sweetalert php mysql

Nếu sau khi đọc nội dung bài viết Hướng dẫn sweetalert php mysql – sweetalert php mysql vẫn chưa hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Mình lý giải và hướng dẫn lại nha

#Hướng #dẫn #sweetalert #php #mysql #sweetalert #php #mysql

Related posts:

Hướng dẫn sweetalert php mysql - sweetalert php mysql 2022

Thủ Thuật Hướng dẫn Hướng dẫn sweetalert php mysql – sweetalert php mysql Mới Nhất

Tập tin index.html

Với Sweetalert 2 thì những chú ý của bạn nhìn trong nó chuyên nghiệp và thích mắt hơn nhiều!

Bài viết này đã hỗ trợ ích cho bạn?

Chia Sẻ Link Down Hướng dẫn sweetalert php mysql – sweetalert php mysql miễn phí

Giải đáp vướng mắc về Hướng dẫn sweetalert php mysql – sweetalert php mysql

Post a Comment

Cách up story video trên Facebook bằng máy tính

Một tỷ, năm trăm triệu viết bằng số như thế nào

Cách xem đáp án Microsoft form

Tượng là sản phẩm của công nghệ chế tạo bằng phương pháp gia công nào

Cách chỉnh full màn hình CS 1.1 Win 10

Biểu mẫu liên hệ

Discuss