Php 在Laravel5中使用ajax从表中删除记录

我想使用ajax删除记录

查看

@foreach( $products as $product )
    <tr>
        <td>{{ $product->code }}</td>
        <td>{{ $product->name }}</td>
        <td>{{ $product->display }}</td>
        <?php $time = date('d M, Y h:i:s A', strtotime($product->created_at)); ?>
        <td>{{ $time }}</td>
        <td>
            <a href="{{ url('/admin/products/' . $product->id . '/edit') }}" class="links-dark edits pull-left">
                <i class="fa fa-edit fa-lg"></i>
            </a>
            <div id="deleteTheProduct">
                {!! Form::open(['method' => 'DELETE', 'id' => 'formDeleteProduct', 'action' => ['AdminProductsController@destroy', $product->id]]) !!}
                    {!! Form::button( '<i class="fa fa-trash fa-lg"></i>', ['type' => 'submit', 'class' => 'delete text-danger deleteProduct','id' => 'btnDeleteProduct', 'data-id' => $product->id ] ) !!}
               {!! Form::close() !!}
           </div>
       </td>
   </tr>
@endforeach

ajax删除

$('.deleteProduct').on('click', function(e) {
    var inputData = $('#formDeleteProduct').serialize();

    var dataId = $('#btnDeleteProduct').attr('data-id');

    $.ajax({
        url: '{{ url('/admin/products') }}' + '/' + dataId,
        type: 'POST',
        data: inputData,
        success: function( msg ) {
            if ( msg.status === 'success' ) {
                toastr.success( msg.msg );
                setInterval(function() {
                    window.location.reload();
                }, 5900);
            }
        },
        error: function( data ) {
            if ( data.status === 422 ) {
                toastr.error('Cannot delete the category');
            }
        }
    });

    return false;
});

**编辑1**：

下面是我返回console.log（msg）后得到的结果

问题是，这会删除产品，但只删除第一行，而不是单击的那一行

我想删除已单击的产品

---

有人能帮忙吗？

我们必须以正常的请求-响应方式发送删除数据的请求。需要更改一点html

<button type="button" class="deleteProduct" data-token="{{ csrf_token() }}">Confirm</button>

$('.deleteProduct').on('click', function(e) {
    var inputData = $('#formDeleteProduct').serialize()+"&_method=delete&_token="+$(this).data(token);

    var dataId = $('#btnDeleteProduct').attr('data-id');

    $.ajax({
        url: '{{ url('/admin/products') }}' + '/' + dataId,
        type: 'POST',
        data: inputData,
        success: function( msg ) {
            if ( msg.status === 'success' ) {
                toastr.success( msg.msg );
                setInterval(function() {
                    window.location.reload();
                }, 5900);
            }
        },
        error: function( data ) {
            if ( data.status === 422 ) {
                toastr.error('Cannot delete the category');
            }
        }
    });

    return false;
});

确认
$（'.deleteProduct'）。在（'click'，函数（e）上{
var inputData=$（'#formDeleteProduct'）.serialize（）+“&_method=delete&_token=“+$（this）.data（token）；
var dataId=$（'btnDeleteProduct'）.attr（'data-id'）；
$.ajax({
url:{{url（'/admin/products'）}+'/'+dataId，
键入：“POST”，
数据：输入数据，
成功：功能（msg）{
如果（msg.status==='success'）{
toastr.success（msg.msg）；
setInterval（函数（）{
window.location.reload（）；
}, 5900);
}
},
错误：函数（数据）{
如果（data.status==422）{
toastr.error（'无法删除类别'）；
}
}
});
返回false；
});

更多参考请参见本帖

您的问题在于：

var dataId = $('#btnDeleteProduct').attr('data-id');

您只会得到第一个，因为您在所有按钮上都使用了重复的id。。因此，id sizzle查询将获得第一个

如果在delete控制器中添加（$id），您将看到这一点。它总是第一个的id。您可以通过查询相对event.target来获取数据id属性

您将希望使用调试器；语句，但查询应类似于：

$(e.target).attr('data-id');

或

---

事件目标应该是单击的按钮，并且您在该按钮上设置了数据id，因此您只需要通过事件查询它

正如@Rob_vH所提到的，您的问题在于如何在JavaScript中获取ID。尝试更改此选项：

var dataId = $('#btnDeleteProduct').attr('data-id');

为此：

var dataId = $(this).attr('data-id');

---

试试这个，换掉你的这个div

<div id="deleteTheProduct">
                {!! Form::open(['method' => 'DELETE', 'id' => 'formDeleteProduct', 'action' => ['AdminProductsController@destroy', $product->id]]) !!}
                    {!! Form::button( '<i class="fa fa-trash fa-lg"></i>', ['type' => 'submit', 'class' => 'delete text-danger deleteProduct','id' => 'btnDeleteProduct', 'data-id' => $product->id ] ) !!}
               {!! Form::close() !!}
</div>

---

delete

调用不需要任何参数。只需执行

$product->delete（）。另外，使用
DELETE
作为ajax方法，而不是
POST
@StuartWagner，我也尝试过。问题是，如果您
return$product，它将删除表的第一行，而不考虑单击哪一行
在控制器中调用
delete（）
之前，添加
console.log（msg）
对于您的ajax调用，您得到了什么？
console.log（msg）
没有显示任何内容。您确定要将ajax请求发送到正确的路径吗？我也尝试过，先生。我想删除被单击的行，该行工作正常，但不管单击的行是什么，只有第一行被删除。那么解决方案是什么？我的意思是我需要做什么？解决方案是将查询更改为$（e.target）.attr（'data-id'）。。。。在点击处理程序中添加“debugger；”，并在javascript控制台中检查其正确性。我使用了
$（this）.attr（'data-id'）
，它成功了！谢谢：）
var dataId = $('#btnDeleteProduct').attr('data-id');

var dataId = $(this).attr('data-id');

<div id="deleteTheProduct">
                {!! Form::open(['method' => 'DELETE', 'id' => 'formDeleteProduct', 'action' => ['AdminProductsController@destroy', $product->id]]) !!}
                    {!! Form::button( '<i class="fa fa-trash fa-lg"></i>', ['type' => 'submit', 'class' => 'delete text-danger deleteProduct','id' => 'btnDeleteProduct', 'data-id' => $product->id ] ) !!}
               {!! Form::close() !!}
</div>

<input type='button' Value='Delete' onclick='deleteProduct($(this))' product_id='{!!$product->id!!}'/>

function deleteProduct(ele){
var product_id = ele.attr('product_id');
//Your Delete Product Ajax Code....
}