从数据库中删除记录的Ajax脚本不工作。

Posted 2021-03-19

我写了一个脚本，应该删除一个特定的条目。问题是当你点击删除按钮时，记录并没有消失，你必须重新加载页面才能使其消失。而且只删除数据库中的第一条记录，比如我点击删除id=2的记录，那么id=1的记录就会被删除。我就不明白为什么会出现这种情况。

这是我的脚本

<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).ready(function () {
        $("body").on("click","#delete",function(e){
            e.preventDefault();

            var id = $(this).data('data-id');
            var token = $("meta[name='csrf-token']").attr("content");

            $.ajax({
                url: "{{route('deletePost',['id' => $post->id])}}",
                type: 'DELETE',
                data: {_token: token, id: id},
                success: function (response){
                    $("#deletePost").html(response.message);
                }
            });
            return false;
        });
    });
</script>

方法

public function delete($id) {
    $post = Profile::find($id);
    $post->delete();
    return response()->json([
        'message' => 'deleted...'
    ]);
}

航线

Route::delete('/id{id}/delete', 'ProfileController@delete')->name('deletePost');

和html

<form action="{{route('deletePost', ['id' => $post->id])}}" method="post" id="formDelete">
    @csrf @method('DELETE')
    <button type="submit" id="delete" class="btn btn-sm btn-outline-danger py-0 mt-4" data-id="{{ $post->id }}">Удалить</button>
</form>

答案

改变

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

到

var id = $(this).data('id')。

<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).ready(function () {
        $("body").on("click","#delete",function(e){
            e.preventDefault();

            var id = $(this).data('id');
            var token = $("meta[name='csrf-token']").attr("content");

            $.ajax({
                url: "delete/"+id,
                type: 'DELETE',
                data: {_token: token, id: id},
                success: function (response){
                    $("#deletePost").html(response.message);
             // call your data get function here for disappear record after delele

                }
            });
            return false;
        });
    });
</script>

把路径改成.net，就可以了。

Route::delete('delete/{id}', 'ProfileController@delete')->name('deletePost');

删除方法就好了，不需要表格中的删除按钮。

<button type="submit" id="delete" class="btn btn-sm btn-outline-danger py-0 mt-4" data-id="{{ $post->id }}">Удалить</button>

另一答案

您错误地访问了属性 data-id 应该是

var id = $(this).data('id');

或

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