使用 ajax 更新 TODO 列表

Question

所以我有一个简单的待办事项列表，当我点击一个 li 项目时，我通过 ajax 调用将我的数据库中的字段 completed 更新为 1 或 0。

显然，我认为代码不好，而且它当然不起作用。只有第一次，当我单击 li 时，它确实会更新，但如果我希望它再次工作，我需要刷新，因为 data-completed 没有更新。我需要 jquery 来做到这一点，但我不知道如何根据原始值将数据属性更新为 1 或 0。

任何关于如何使其正常工作的指针将不胜感激。

查看：

<li data-id='{!! $task->id !!}' data-completed='@if($task->completed == '1') 0 @else 1 @endif'>

AJAX 调用：

$('li').on('click', function(e){
    $.ajax({
        url: 'api/tasks/update/'+$(this).data('id')+'/'+$(this).data('completed'),
        method: 'GET'
    })
});

由于我使用的是 laravel，所以这是我的路线：

Route::get('api/tasks/update/{id}/{completed}', function($id, $completed) {
    $task = App\Task::find($id);

    $task->completed = $completed;

    $task->save();
});

Answer 1

您需要在这里做几件事：

首先，如果您已经在数据库中保存了 0/1，则不需要 if 语句，因此您可以简化视图部分：

<li data-id='{!! $task->id !!}' data-completed='{{ $task->completed }}'>

其次，您需要返回更新后的任务，以便您可以更新视图：

Route::get('api/tasks/update/{id}/{completed}', function($id, $completed) {
    $task = App\Task::find($id);

    $task->completed = $completed;

    $task->save();

    return response()->json($task);
});

然后，更新您的 ajax 调用，以便在返回更新后的 task 时，您可以更新您的列表：

$('li').on('click', function(e){
    var completed = (!$(this).data('completed') ? 1 : 0);
    $.ajax({
        url: 'api/tasks/update/'+$(this).data('id')+'/'+$(this).data('completed'),
        method: 'GET',
        success: function(data) {
          $(this).data('completed', data.completed);
       },
    })
});

我还会做的是将您的路由和 AJAX 调用更新为POST，因为这只是您更新数据时的好习惯：

PHP

Route::post('api/tasks/update/{id}', function(Request $request, $id) {
    $task = App\Task::find($id);

    $completed = $request->input('completed');

    $task->completed = $completed;

    $task->save();

    return response()->json($task);
});

JS

$('li').on('click', function(e){
    $.ajax({
        url: 'api/tasks/update/'+$(this).data('id'),
        data: {completed: (!$(this).data('completed') ? 1 : 0)},
        method: 'POST',
        success: function(data) {
          $(this).data('completed', data.completed);
       },
    })
});