کتابخانه SweetAlert2 استفاده از SweetAlert2 با AJAX در لاراول

لودینگ هنگام‌ لود شدن وب ویو + حذف اسکرول افقی اضافی از WebView

آموزش تابع Serialize() در php به همراه مثال

منتشر شده توسط مدیر سایت در 28 اردیبهشت 1398

استفاده از کتابخانه SweetAlert2 با AJAX در لاراول

استفاده از SweetAlert2 با AJAX در لاراول ، در این پست از تجاری اپ قصد داریم نحوه استفاده از کتابخانه SweetAlert2 در لاراول با AJAX را آموزش دهیم.این آموزش خیلی ابتدایی نمی باشد به همین دلیل ما فرض می کنیم که شما نحوه ی ایجاد Route ، نحوه ی ایجاد کنترلر ، view ها و غیره را می دانید و از گفتن آنها صرف نظر می کنیم.با ماهمراه باشید.

استفاده از کتابخانه SweetAlert2 به همراه AJAX در لاراول

ایجاد متدها در کنترلر
تعریف Route
بکار بردن SweetAlert2 همراه با AJAX در فایل Blade
اجرا و مشاهده خروجی

همچنین بخوانید: آموزش آپلود چندین عکس با Dropzone در لاراول 5.8

ایجاد متدها در کنترلر

ما یک کنترلر با نام UserController ایجاد کرده ایم و در این کنترلر دو متد ایجاد می کنیم یکی برای گرفتن همه کارابران و دیگری برای حذف یک کاربر.کدهای مربوط به این کنترلر و متدهایی که در آن ایجاد کرده ایم را در زیر مشاهده می کنید:

<?php

namespace App\Http\Controllers;

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

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

    public function delete($id)
    {
        $delete =   User::where('id', $id)->delete();

        // check data deleted or not
        if ($delete)
        {
            $success    =   true;
            $message    =   "کاربر با موفقیت حذف شد!";
        } else {
            $success    =   true;
            $message    =   "کاربر پیدا نشد!";
        }

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

تعریف Route

در این مرحله دو Route برای دو متدهایی که در کنترلر ایجاد کردیم ، تعریف می کنیم:

<?php

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

بکار بردن کتابخانه SweetAlert2 همراه با AJAX در فایل Blade

یک View با نام users.blade.php ایجاد کنید و کدهای زیر را در ان وارد کنید:

<!doctype html>
<html lang="en">
<head>
    <!-- Required 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <!-- jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>

    <title>استفاده از SweetAlert2 با AJAX در لاراول</title>
</head>
<body class="container" style="direction:rtl; text-align:right; margin-top: 40px;">

<div class="row" style="margin-bottom: 20px;">
    <div class="col-lg-12 margin-tb">
        <div class="pull-right">
            <h3>کاربران</h3>
        </div>
    </div>
</div>

<table class="table table-bordered">
    <tr>
        <th>شناسه</th>
        <th>نام</th>
        <th>ایمیل</th>
        <th width="280px">عملیات</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}})">حذف</button>
            </td>
        </tr>
    @endforeach
</table>

<script type="text/javascript">
    function deleteConfirmation(id) {
        swal({
            title: "حذف؟",
            text: "لطفا اطمینان حاصل کنید و سپس تایید کنید!",
            type: "warning",
            showCancelButton: !0,
            confirmButtonText: "بله، آن را حذف کنید!",
            cancelButtonText: "خیر، لغو!",
            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("انجام شد!", results.message, "success");
                        } else {
                            swal("خطا!", results.message, "error");
                        }
                    }
                });

            } else {
                e.dismiss;
            }

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

اجرا و مشاهده خروجی

اکنون پروژه لاراول خود را اجرا کنید و سپس آدرس http://localhost:8000/users را در مرورگر خود مشاهده نمایید.اگر همه مراحل را بدرستی انجام داده باشید باید یک صفحه مانند تصویر زیر مشاهده کنید:

همچنین بخوانید: دریافت id آخرین رکورد درج شده در جدول در لاراول 5.8