在 laravel 5.7 中使用 ajax 技术

Question

我想使用 ajax 技术删除和更新带有模态的表格行 在 laravel 5.7 但我对 ajax 很天真。 如果有人帮助并解释 ajax 如何发送/获取数据，我将不胜感激 控制器，在 PHP 中使用 ajax 和 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

在 PHP 和 laravel 中使用 ajax 没有区别。

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();

}