Ajax 및 jQuery를 사용하여 PHP에서 여러 레코드 삭제

42499 단어 ajax php jquery mysql

원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/php/delete-multiple-records-in-php-using-ajax-and-jquery

ajax 및 jquery를 사용하여 PHP에서 여러 레코드를 삭제하는 방법을 생각하고 있습니까? 이번 포스팅에서는 그 방법을 알려드리겠습니다. 레코드를 하나씩 삭제하는 데 시간이 걸릴 수 있지만 이 기능을 사용하면 사용자가 더 쉽게 시간을 절약할 수 있습니다. 다음은 이 튜토리얼의 단계별 설명입니다. 내 이전 게시물을 읽으면 내 직원 기록 관리 자습서의 연속입니다.

1. 데이터베이스 생성

먼저 원하는 이름으로 데이터베이스를 만들어야 합니다. 명령 프롬프트를 열고 MySQL 명령을 사용하여 프로세스를 수행하면 로컬 호스트에 이미 PHPMyAdmin을 설치한 경우 PHPMyAdmin을 쉽게 사용할 수 있습니다.

2. 테이블 생성

그런 다음 "employees"테이블이라는 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;

3. 데이터베이스 연결 설정

아래 코드는 여기에서 데이터베이스 자격 증명을 정의하는 사용 가능한 다운로드 소스 코드의 파일config.php입니다.

<?php
    //set the servername
    define("SERVER_NAME", "localhost");
    //set the server username
    define("SERVER_UNAME", "root");
    // set the server password (you must put password here if your using live server)
    define("SERVER_UPASS", "");
    // set the database name
    define("SERVER_DB", "demos");

    // Include functions file
    require_once 'functions.php';

    // Set a variable $db and store db connection
    $db = connectDB();
?>

4. PHP 다중 삭제 기능

이제 PHP에서 다중 삭제 기능을 만들고 이름을 multi-delete.php 로 지정합니다.

<?php
    // include config file
    require_once 'config.php';

    //a PHP Super Global variable which used to collect data after submitting it from the form
    $request = sanitize($_REQUEST);

    // define result value
    $result = "";

    // Check if there is values for employee ids
    if(count($request['employee_ids'])):

        // Loop the employee ids for delete
        foreach($request['employee_ids'] as $employeeId):

            // Set the DELETE SQL data
            $sql = "DELETE FROM employees WHERE id='".$employeeId."'";

            // Process the query so that we will save the date of birth
            if ($db->query($sql)) {
                $result = "success";
            } else {
                $result = "Error: " . $sql . "<br>" . $db->error;
            }

        endforeach;

        // Close the connection after using it
        $db->close();
    endif;


    // Check if the iteration employees for delete has been successfully deleted
    if($result == "success"):
        echo "Selected employee(s) has been deleted.";
    else:
        // Check if empty then no value stored in this variable
        if($result == ""):
            echo "No deleted employees(s)";
        else://mysql error
            echo $result;
        endif;
    endif;

?>

5. 색인 HTML 코드

아래 코드index.html 파일을 확인해주세요.

<!doctype html>
<html lang="en">
<head>
    <title>Ajax Form Validation in PHP & MySQL using jQuery</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>Ajax Form Validation in PHP & MySQL using jQuery</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 class="list-action-wrapper">
                    <select id="list-actions">
                        <option value="">Select action</option>
                        <option value="delete">Delete</option>
                    </select>
                </div>
                <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">&times;</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>

아래의 다음 코드에는 위 HTML 코드의 요소가 있습니다. 이 요소에서는 ajax를 통해 직원 목록을 여기에 표시합니다.

<div id="employees-list"></div>

6. Ajax를 통해 직원 목록 표시

아래의 다음 자바스크립트 코드는 ajax를 통해 모든 직원을 표시합니다. 이 함수는 scripts.js에서 찾을 수 있습니다.

function all() 
{
    // Ajax config
    $.ajax({
        type: "GET", //we are using GET method to get all record from the server
        url: 'all.php', // get the route value
        beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
            ajaxLoader("#employees-list", "show");
        },
        success: function (response) {//once the request successfully process to the server side it will return result here

            // Parse the json result
            response = JSON.parse(response);

            var html = "";
            // Check if there is available records
            if(response.length) {
                html += '<div class="list-group">';
                // Loop the parsed JSON
                $.each(response, function(key,value) {
                    // Our employee list template
                    html += '<a href="javascript:void(0)" class="list-group-item list-group-item-action">';
                    html += "<p><input type='checkbox' value='"+value.id+"' class='multi-options-action'>&nbsp;" + value.first_name +' '+ value.last_name + " <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+"'>Edit</button>";
                    html += "<button class='btn btn-sm btn-danger mt-2 ml-2 btn-delete-employee' data-id='"+value.id+"' typle='button'>Delete</button>";
                    html += '</a>';
                });
                html += '</div>';
            } else {
                html += '<div class="alert alert-warning">';
                  html += 'No records found!';
                html += '</div>';
            }

            // Insert the HTML Template and display all employee records
            $("#employees-list").html(html);
        },
        complete: function() {
            ajaxLoader("#employees-list", "hide");
        }
    });
}

위의 코드에서 아래에서 볼 수 있는 확인란 요소를 추가했습니다. 직원 이름 앞에 체크박스가 나타나도록 직원 목록 그룹 항목 템플릿에 추가했습니다.

<input type='checkbox' value='"+value.id+"' class='multi-options-action'>

7. 다중 삭제 jQuery 및 Ajax 기능

이 함수는 삭제를 위해 선택된 직원의 확인란을 생성하고 배열에 푸시한 다음 서버에 게시하여 PHP 함수가 처리하고 데이터베이스에서 삭제할 수 있도록 합니다. 이 기능은 아래에서 다운로드할 수 있는 scripts.js 파일에서 찾을 수 있습니다.

function multiDelete() 
{
    $("#list-actions").on("change", function() {
        var $actionEl = $(this);
        // Get our action value
        var action = $actionEl.val();
        // We will store here our checked employees
        var employeeIds = [];
        // This function will reset the selected actions after submitting
        var resetAction = function() {
            $actionEl.prop('selectedIndex',0);
        };

        // Iterate the checked employee for deletion
        $(".multi-options-action").each(function() {
            if($(this).is(":checked")) {
                // store employee id to employeeIds array
                employeeIds.push($(this).val())
            }
        });

        // Check if the action is delete
        if(action == "delete") {
            // Check if there is checked employee for delete
            if(employeeIds.length) {
                // Sweetalert message confirmation
                Swal.fire({
                    icon: 'warning',
                    title: 'Are you sure you want to delete this selected record(s)?',
                    showDenyButton: false,
                    showCancelButton: true,
                    confirmButtonText: 'Yes'
                }).then((result) => {

                    // Check if confirmed
                    if (result.isConfirmed) {
                        $.ajax({
                            type: "POST",
                            url: "multi-delete.php",
                            data: {employee_ids : employeeIds}, 
                            cache: false,
                            success: function(response){
                                // Reload lists of employees
                                all();
                                // Display response message
                                Swal.fire('Success.', response, 'success')
                            }
                        });
                    }

                    //reset action selected
                    resetAction();

                });
            } else {
                //reset action selected
                resetAction();
                // Display warning message
                Swal.fire('Warning.', "No selected record(s)", 'warning')
            }
        }

    });
}

이제 프로세스가 이미 있고 PHP에서 ajax를 사용하여 레코드를 다중 삭제하는 방법에 대한 아이디어가 있습니다. 이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/php/delete-multiple-records-in-php-using-ajax-and-jquery를 방문하십시오.

행복한 코딩 :)

Reference

이 문제에 관하여(Ajax 및 jQuery를 사용하여 PHP에서 여러 레코드 삭제), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codeanddeploy/delete-multiple-records-in-php-using-ajax-and-jquery-1p8m

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

iOS Simulator에서 네트워크 대역 제한을 수행하는 방법

YYPHP#46 「Docker로 Laravel을 움직이자 핸즈온!」

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다