Laravel 8의 Ajax와 Sweetalert 2 통합
17190 단어 laravelajaxphpjavascript
이번 포스트에서는 Laravel 8에서 sweetalert 2와 ajax를 통합하는 방법을 공유하고 있습니다. 이전 포스트에서 bootbox alert with ajax in Laravel에 대해 공유했습니다. 당신의 선택은 당신에게 달려 있습니다. 예기치 않은 삭제 버튼 클릭을 방지하기 위해 확인 상자가 필요하다는 것을 알고 있습니다.
이 예에는 컨트롤러, 모델, 경로 및 블레이드가 있습니다. 아래 단계를 계속 읽으십시오.
노선:
Route::resource('posts', PostsController::class);
제어 장치:
/**
* Remove the specified resource from storage.
*
* @param \App\Models\Post $post
* @return \Illuminate\Http\Response
*/
public function destroy(Post $post)
{
$post->delete();
return response('Post deleted successfully.', 200);
}
모델:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $fillable = [
'title',
'description',
'body'
];
use HasFactory;
}
잎:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Delete Record using Ajax in Laravel 8 - codeanddeploy.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.delete-form').on('submit', function(e) {
e.preventDefault();
var button = $(this);
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) {
$.ajax({
type: 'post',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: button.data('route'),
data: {
'_method': 'delete'
},
success: function (response, textStatus, xhr) {
Swal.fire({
icon: 'success',
title: response,
showDenyButton: false,
showCancelButton: false,
confirmButtonText: 'Yes'
}).then((result) => {
window.location='/posts'
});
}
});
}
});
})
});
</script>
</head>
<body>
<div class="container mt-5">
@if(Session::get('success', false))
<?php $data = Session::get('success'); ?>
@if (is_array($data))
@foreach ($data as $msg)
<div class="alert alert-success" role="alert">
<i class="fa fa-check"></i>
{{ $msg }}
</div>
@endforeach
@else
<div class="alert alert-success" role="alert">
<i class="fa fa-check"></i>
{{ $data }}
</div>
@endif
@endif
<table class="table table-striped" id="users-table">
<thead>
<tr>
<th scope="col"><input type="checkbox" class="check-all"></th>
<th scope="col">Title</th>
<th scope="col">Description</th>
<th scope="col">Body</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
@foreach($posts as $post)
<tr>
<td><input type="checkbox" class="check"></td>
<td>{{$post->title}}</td>
<td>{{$post->description}}</td>
<td>{{$post->body}}</td>
<td>
<form method="post" class="delete-form" data-route="{{route('posts.destroy',$post->id)}}">
@method('delete')
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</body>
</html>
Sweetalert 2에 대한 자세한 내용은 해당 웹사이트documentation를 참조하십시오.
이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/laravel/integrate-sweetalert-2-with-ajax-in-laravel-8를 방문하십시오.
행복한 코딩 :)
Reference
이 문제에 관하여(Laravel 8의 Ajax와 Sweetalert 2 통합), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codeanddeploy/integrate-sweetalert-2-with-ajax-in-laravel-8-19p5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
