Laravel 8 - AJAX를 사용한 SweetAlert2(간단한 3단계)🍬🍭🧁

7887 단어 beginnersphplaravelajax
SweetAlert2는 무엇입니까?

SweetAlert2 is a beautiful, customizable, accessible replacement for javascript's pop-up boxes with zero dependencies!





sweetalert2에 대한 자세한 내용은 여기를 참조하십시오.

이제 sweetalert2 에 대해 잘 이해했으므로 시작하겠습니다!

1단계: 컨트롤러 생성



다음 명령을 사용하여 사용자 컨트롤러를 만듭니다.

php artisan make:controller UserController


사용자 컨트롤러를 열고 다음 코드를 붙여넣습니다.

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    // all users
    public function users()
    {
        $users = User::all();
        return view('users', compact('users'));
    }

    // delete user
    public function delete($id)
    {
        $delete = User::destroy($id);

        // check data deleted or not
        if ($delete == 1) {
            $success = true;
            $message = "User deleted successfully";
        } else {
            $success = true;
            $message = "User not found";
        }

        //  return response
        return response()->json([
            'success' => $success,
            'message' => $message,
        ]);
    }
}


여기에서 우리는 두 개의 함수를 만들었습니다. 하나는 모든 사용자를 가져오기 위한 것이고 다른 하나는 사용자를 삭제하기 위한 것입니다.

2단계: 경로 정의 및 가짜 데이터 삽입



이 두 함수에 대한 경로를 정의해 보겠습니다.

<?php

use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;

Route::get('users', [UserController::class, 'users']);
Route::post('delete/{id}', [UserController::class, 'delete']);


이제 factory와 seeder를 사용하여 가짜 사용자 데이터를 삽입해 보겠습니다.

\App\Models\User::factory(5)->create(); // 5 fake user data


여기에서 자세히 읽어보세요.



3단계: 블레이드 파일에서 AJAX로 SweetAlert2 설정


users.blade.php라는 뷰를 만들고 다음 코드를 붙여넣습니다.

<!doctype html>
<html lang="en">
<head>
    <!-- meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- csrf-token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css">
    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.5.1/sweetalert2.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.5.1/sweetalert2.all.min.js"></script>

    <title>How to Use SweetAlert2 with AJAX in Laravel 8.x</title>
</head>
<body class="container" style="margin-top: 40px;">

<div class="row" style="margin-bottom: 20px;">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h3>Users</h3>
        </div>
    </div>
</div>

<table class="table table-bordered">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th width="280px">Actions</th>
    </tr>
    @foreach ($users as $user)
        <tr>
            <td>{{ $user->id }}</td>
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>
            <td>
                <button class="btn btn-danger" onclick="deleteConfirmation({{$user->id}})">Delete</button>
            </td>
        </tr>
    @endforeach
</table>

<script type="text/javascript">
    function deleteConfirmation(id) {
        swal.fire({
            title: "Delete?",
            icon: 'question',
            text: "Please ensure and then confirm!",
            type: "warning",
            showCancelButton: !0,
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel!",
            reverseButtons: !0
        }).then(function (e) {

            if (e.value === true) {
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

                $.ajax({
                    type: 'POST',
                    url: "{{url('/delete')}}/" + id,
                    data: {_token: CSRF_TOKEN},
                    dataType: 'JSON',
                    success: function (results) {
                        if (results.success === true) {
                            swal.fire("Done!", results.message, "success");
                            // refresh page after 2 seconds
                            setTimeout(function(){
                                location.reload();
                            },2000);
                        } else {
                            swal.fire("Error!", results.message, "error");
                        }
                    }
                });

            } else {
                e.dismiss;
            }

        }, function (dismiss) {
            return false;
        })
    }
</script>
</body>
</html>


모든 설정을 마쳤으니 이제 확인해 봅시다!

실행 및 출력 보기



라라벨 프로젝트 실행

php artisan serve


이 경로http://localhost:8000/users를 방문하면 다음과 같은 페이지가 표시됩니다.



삭제 버튼을 클릭하면 SweetAlert2 확인 상자가 나타납니다:
Image description

예 버튼을 클릭하면 AJAX를 통해 데이터가 삭제되고 다음과 같은 확인 메시지가 표시됩니다.


Hurray! We have succesfully created and tested sweetalert2, use this on your future projects to make it more beautiful!



210524_TIL
무시 하기 쉬 운 js 디 테 일

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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