Ajax를 사용하여 PHP 및 MySQL에서 jQuery로 데이터 삭제
이 자습서에서는 ajax를 사용하여 PHP 및 MySQL에서 데이터를 삭제하는 방법을 배웁니다. 이는 소프트웨어를 만들 때 일반적인 기능이라는 것을 알고 있습니다. 따라서 이 간단한 방법을 통해 배우고 향후 프로젝트에서 사용하기를 바랍니다.
ajax의 도움으로 페이지를 다시 로드하지 않고 특정 레코드를 삭제하도록 서버에 요청하고 목록에서 레코드를 자동으로 제거할 수 있습니다. 이해를 돕기 위해 간단한 직원 데이터베이스를 사용하여 기록을 삭제합니다.
데이터베이스 생성
따라서 먼저 원하는 데이터베이스 이름을 만드십시오. 데이터베이스를 생성한 후 "직원"테이블을 생성해야 합니다. SQL 예제는 아래 코드를 확인하십시오.
CREATE TABLE `employees` (
`id` int(10) NOT NULL,
`email` varchar(100) NOT NULL,
`first_name` varchar(100) NOT NULL,
`last_name` varchar(100) NOT NULL,
`address` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
ALTER TABLE `employees`
ADD PRIMARY KEY (`id`);
ALTER TABLE `employees`
MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
COMMIT;
더 나은 경험을 위해 MySQL 명령줄 또는 PHPMyAdmin에서 테이블을 추가할 수 있습니다. 이것은 너에게 달려있어.
인덱스 HTML 생성
이 섹션에서는
index.html를 생성하고 이 코드를 아래에 입력합니다.<!doctype html>
<html lang="en">
<head>
<title>Delete Data in PHP & MySQL Using Ajax</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Page CSS -->
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<br><br>
<h1>Delete Data 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>
<!-- Page Script -->
<script src="assets/js/scripts.js"></script>
</body>
</html>
PHP 함수 삭제
여기서는 파일
delete.php을 생성하고 이를 직원 레코드 삭제에 사용합니다.<?php
$request = $_REQUEST; //a PHP Super Global variable which used to collect data after submitting it from the form
$id = $request['employee_id']; //employee ID we are using it to get the employee record
$servername = "localhost"; //set the servername
$username = "root"; //set the server username
$password = ""; // set the server password (you must put password here if your using live server)
$dbname = "demos"; // set the table name
$mysqli = new mysqli($servername, $username, $password, $dbname);
if ($mysqli->connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli->connect_error;
exit();
}
// Set the DELETE SQL data
$sql = "DELETE FROM employees WHERE id='".$id."'";
// Process the query so that we will save the date of birth
if ($mysqli->query($sql)) {
echo "Employee has been successfully deleted.";
} else {
echo "Error: " . $sql . "<br>" . $mysqli->error;
}
// Close the connection after using it
$mysqli->close();
?>
Ajax 삭제 기능
이 함수에서는 서버와 통신하는 데 사용할 ajax 삭제를 생성합니다.
scripts.js에서 이 기능을 찾을 수 있으며 전체 소스 코드를 다운로드할 때 볼 수 있습니다.function del()
{
$(document).delegate(".btn-delete-employee", "click", function() {
if (confirm("Are you sure you want to delete this record?")) {
var employeeId = $(this).attr('data-id'); //get the employee ID
// Ajax config
$.ajax({
type: "POST", //we are using POST method for requesting to our server to delete the record
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();
alert(response)
}
});
}
});
}
그런 다음 위의 del 함수를 호출합니다.
$(document).ready(function() {
// Delete record via ajax
del();
});
따라서 위의 코드를 따른 후 Ajax를 사용하여 PHP 및 MySQL에서 삭제 기능을 일반적으로 코딩하는 방법을 배우게 됩니다. 이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/php/delete-data-with-jquery-in-php-mysql-using-ajax를 방문하십시오.
NOTE: Kindly Don't use this code example as is, do some research also about how to secure your PHP code like SQL Injection and CSRF attacks. And before deleting the record you need to sanitize the submitted ID so that it will safe when querying it to your database. You must also check the ID if existing to your database before deleting the record.
Reference
이 문제에 관하여(Ajax를 사용하여 PHP 및 MySQL에서 jQuery로 데이터 삭제), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codeanddeploy/delete-data-with-jquery-in-php-mysql-using-ajax-1pc3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
