用ajax更新TODO列表

There's a few things you need to do here:

First, you don't need your if statement if you're already saving 0/1 in the database, so you can simplify your view portion:

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

Second, you'll need to return the updated task so that you can update your view:

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

    $task->completed = $completed;

    $task->save();

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

Then, update your ajax call so that when the updated task is returned, you can update your list:

$('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);
       },
    })
});

Something I would also do is update your route and AJAX calls to POST, as this is just good practice for when you're updating data:

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);
       },
    })
});