Laravel+JavaScript批量删数据库行时页面无法刷新问题求助

嘿，我看了你的代码和错误截图，发现核心问题出在控制器响应类型不匹配，还有一处查询逻辑的小疏漏，导致JS报错、页面无法正常更新。我帮你一步步修正：

1. 修正控制器的响应与查询逻辑 #

你现在的控制器删除数据后返回了重定向，但AJAX请求不会自动跳转页面，反而会把重定向的HTML页面当成响应内容，导致前端JS无法解析出预期的data.success字段，直接触发报错。同时，批量删除的查询写法也有误，应该用whereIn来匹配多个ID：

public function deleteAllSelected(Request $request) {
    $ids = $request->ids;
    // 修正：用whereIn匹配多个ID，原写法的where无法批量匹配
    Video::whereIn('id', explode(",", $ids))->delete();
    
    // 返回JSON响应，而非重定向，适配AJAX请求的解析需求
    return response()->json([
        'success' => 'Video(s) deleted successfully!'
    ]);
}

2. 调整前端JavaScript逻辑 #

原来的JS里已经写了移除选中行的代码，但因为控制器响应错误没执行。另外还有一段重复的行移除代码可以删掉，避免冗余：

$('.delete_all').on('click', function(e) {
    var allVals = [];
    $(".sub_chk:checked").each(function() {
        allVals.push($(this).attr('data-id'));
    });
    if(allVals.length <=0) {
        alert("Please select videos.");
    } else {
        var check = confirm("Are you sure you want to delete this ?");
        if(check == true){
            var join_selected_values = allVals.join(",");
            $.ajax({
                url: $(this).data('url'),
                type: 'DELETE',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data: { ids: join_selected_values }, // 改成对象格式更规范
                success: function (data) {
                    if (data.success) {
                        // 移除选中的表格行
                        $(".sub_chk:checked").parents("tr").remove();
                        alert(data.success);
                        // 如果需要同步更新分页数据，可添加页面刷新（可选）
                        // window.location.reload();
                    } else if (data.error) {
                        alert(data.error);
                    } else {
                        alert('Whoops Something went wrong!!');
                    }
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });

            // 删掉这段重复的行移除代码，上面的逻辑已经处理完成
            // $.each(allVals, function( index, value ) {
            //     $('table tr').filter("[data-row-id='" + value + "']").remove();
            // });
        }
    }
});

3. 额外小优化 #

如果删除后需要同步更新分页栏（比如删除后分页数量减少），可以在AJAX成功回调里加上window.location.reload()，强制刷新页面展示最新数据；如果不需要刷新，仅移除当前行也能正常展示剩余数据。

这样修改后，批量删除功能就能正常工作：数据成功删除，前端正确移除对应行，不会再出现JS错误，也能看到更新后的列表啦！

内容的提问来源于stack exchange，提问作者Slaveworx