используя технику Ajax в Laravel 5.7

Question

Я хочу удалить и обновить строку таблицы модальным способом, используя технику ajax в laravel 5.7, но я довольно наивен с ajax.Буду признателен, если кто-нибудь поможет и объяснит, как ajax отправляет / получает данные в контроллере, и есть ли разница между использованием ajax в PHP и laravel .?

это моя таблица

<table class="table table-striped">
<tr>
    <th>ID</th>
    <th>Title</th>
    <th>Description</th>


</tr>
@foreach($project as $pro)
<tr>
    <td>{{$pro->id}}</td>
    <td>{{$pro->title}}</td>
    <td>{{$pro->description}}</td>
    <td>
        <button class="btn btn-info" 
data-toggle="modal" data-target="#edit">Edit</button>
        <button class="btn btn-danger"  
data-toggle="modal" data-target="#dlt">Delete</button>
    </td>

<--------------------->

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria- 
labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <form method="post" action="">
            @method('PATCH')
            @csrf
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                     <label for="title">Title</label>
                     <input type="text" class="form-control" name="title" >
                </div>
                <div class="form-group">
                    <label for="description">Description</label>
                    <input type="text" class="form-control" 
name="description">
                </div>              
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data- 
dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save 
changes</button>
            </div>
        </form>
    </div>
</div>
</div>

 this is my modal code 
<div class="modal fade" id="dlt" tabindex="-1" role="dialog" aria- 
labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
    <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Adding 
Project</h4>
            </div>
             <form method="post" action="">
                @method('delete')
                @csrf
            <div class="modal-body">
                <p class="text-center">
                    Are you sure, you want to delete this.?
                </p>            
            </div>
            <div class="modal-footer">
                    <button type="button" class="btn btn-default" data- 
dismiss="modal">No, Cancel</button>
                    <button type="submit" class="btn btn-info">Yes, 
Delete</button>
            </div>
        </form>
    </div>
 </div>
</div>


my route
Route::resource('projects', 'ProjectsController');

Answer 1

Нет никакой разницы между использованием ajax в PHP и laravel.

Настройка HTML, добавьте эту мета в вашу головку HTML.

 <meta name="csrf-token" content="{{ csrf_token() }}" />

Обновите кнопку удаления и добавьте скрытое поле внутриВаше модальное тело удаления.

   <button class="btn btn-danger btn-delete-project" data-toggle="modal" data-target="#dlt" data-project-id="{{ $pro->id}}">Delete</button>
    <input type="hidden" name="project_id" id="project_id" value="">

    <button type="submit" class="btn btn-info delete-project-confirm">Yes, Delete</button>

Получите Вашу удаленную строку,

<tr data-row-id="{{ $pro->id }}">
</tr>

Определите свою функцию AJAX, есть много различных методов, которые вы можете сделать.Простой пример ниже.

/**
 * project delete confirm modal
 */
$(document).on('click', '.btn-delete-project', function (e) {
    e.preventDefault();
    var projectId = $(this).data('project-id');
    $('#dlt #project_id').val(projectId);
});
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

 /**
  * ajax call
  */
// give your delete button id
$(document).on('click', '.delete-project-confirm', function (e) {
    e.preventDefault();
    var projectId = $('#dlt  #project_id').val();
    var deletedRow = $('tr[data-row-id="' + projectId + '"]');
    $.ajax({
        type: 'delete',
        url: '/project/' + projectId,
        success: function () {
            $('#dlt').modal('toggle');
             deletedRow.remove();    
            // toastr.success('Order Has Been Deleted Successfully.');
        },
        error: function(XMLHttpRequest) {
            // toastr.error('Something Went Wrong !');
        }
    });

});

В вашем методе ProjectController destroy (),

public function destroy($id)
{
    // dd($id);
    $project = Project::findOrFail($id);

    // dd($project);
    $project->delete();

}