Question

所以我有一个带有ajax调用的简单todo列表，当我点击一个li项目时，我将数据库中的字段@Component({ selector: 'inputbox1', templateUrl: 'templates/Tnputbox1.html' }) export class Inputbox1 { ... }更新为1或0。

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

非常感谢任何关于如何使其正常工作的指示。

查看：

data-completed

AJAX致电：

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

由于我正在使用laravel，这是我的路线：

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

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

使用ajax更新TODO列表

1 个答案: