TODO列表更新與AJAX

Question

所以我有這個簡單待辦事項列表與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

有你需要做的幾件事：

首先，你沒有n EED你的if語句，如果你已經在數據庫中保存0/1，這樣你就可以簡化您的視圖部分：

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