Ajax를 사용하여 PHP 및 MySQL에서 Sweetalert 2 통합
29366 단어 phpjqueryjavascriptmysql
이 튜토리얼에서는 Ajax를 사용하여 PHP 및 MySQL에서 sweetalert 2를 통합하는 방법을 보여줍니다. Sweet alert 2를 사용하면 웹 애플리케이션의 알림 상자를 사용자 정의할 수 있으며 많은 개발자가 좋아하는 모양과 느낌이 놀랍습니다. 따라서 이 기사에서는 이를 애플리케이션에 쉽게 통합하는 방법을 공유할 것입니다.
인덱스 HTML 생성
먼저
index.html 파일을 생성하여 시작하겠습니다. 아래 코드를 참조하십시오.<!doctype html>
<html lang="en">
<head>
<title>Integrate Sweetalert 2 In PHP & MySQL Using Ajax</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Sweetalert 2 CSS -->
<link rel="stylesheet" href="assets/plugins/sweetalert2/sweetalert2.min.css">
<!-- Page CSS -->
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<br><br>
<h1>Integrate Sweetalert 2 In PHP & MySQL Using Ajax</h1>
<br><br>
<div class="row">
<div class="col-md-4">
<h3>Add New Employee</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="first_name">First Name</label>
<input class="form-control" type="text" name="first_name">
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input class="form-control" type="text" name="last_name">
</div>
<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" type="text" name="address" rows="3"></textarea>
</div>
<button type="button" class="btn btn-primary" id="btnSubmit">Submit</button>
</form>
</div>
<div class="col-md-8">
<h3>List of Employees</h3>
<div id="employees-list"></div>
</div>
</div>
</div>
<!-- The Modal -->
<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">Edit Employee</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="first_name">First Name</label>
<input class="form-control" type="text" name="first_name">
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input class="form-control" type="text" name="last_name">
</div>
<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" type="text" name="address" rows="3"></textarea>
</div>
<button type="button" class="btn btn-primary" id="btnUpdateSubmit">Update</button>
<button type="button" class="btn btn-danger float-right" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
<!-- Must put our javascript files here to fast the page loading -->
<!-- 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="assets/plugins/sweetalert2/sweetalert2.min.js"></script>
<!-- Page Script -->
<script src="assets/js/scripts.js"></script>
</body>
</html>
위에서 볼 수 있듯이 sweetalert2 자바스크립트와 스타일을 가져왔습니다.
Ajax를 사용하여 레코드 저장으로 Sweetalert를 구현하시겠습니까?
따라서 이전 자습서에서는 레코드를 성공적으로 생성한 후 네이티브 자바스크립트 경고를 사용하고 있습니다. 아래 스크린샷에서 볼 수 있듯이.
이제 sweetalert2의 멋진 디자인을 사용하여 교체하겠습니다. 누가 그것을 할 것인지 아래 코드를 확인하십시오.
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
}
});
});
}
위의 저장 기능에서 ajax 성공 내부에서
Swal.fire로 시작하는 코드를 볼 수 있습니다. 아래에서 볼 수 있듯이.
Swal.fire({
icon: 'success',
title: 'Success.',
text: response
});
이제 sweetalert2를 이미 추가했으므로 새 레코드를 저장하면 아래와 같이 경고 상자가 나타납니다.
우리는 이미 기본을 구현하기 때문에. 다음으로 확인 대화 상자 유형 sweetalert 2를 구현합니다.
PHP 및 MySQL에서 Ajax 삭제를 사용하여 대화 상자 유형 Sweetalert 구현
다음은 레코드 삭제를 확인하는 데 사용할 대화 유형 sweetalert 2에 대한 예제 코드입니다.
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
}
});
샘플 코드가 있으므로 다음으로 ajax 삭제를 사용하여 구현하는 방법에 대한 전체 코드를 다룰 것입니다. 아래 코드를 확인해주세요.
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')
}
});
});
}
자, 이제 프로젝트에 sweet alert 2를 구현할 준비가 되었습니다. 이제 이 코드의 실제 동작을 살펴볼 시간입니다. 이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/php/integrate-sweetalert-2-in-php-mysql-using-ajax를 방문하십시오.
Reference
이 문제에 관하여(Ajax를 사용하여 PHP 및 MySQL에서 Sweetalert 2 통합), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codeanddeploy/reset-form-after-submitted-using-jquery-4iac텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
