javascript - 使用ajax调用更新数据库onclick

Question

我希望能够在单击 li 项目时更新数据库，但我很难找到这个问题的答案。我知道有数百个类似的问题，但我无法获得针对我的问题的具体答案，以便与 Laravel 一起使用。

这是我更新数据库的路线:

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

    $task->completed = Request::get('completed');

    $task->save();
});

我的 View 上只有一个无序列表，其中包含一些 li，一旦单击其中一个 View ，我想将数据库中的特定值设置为 0 或 1 .

这是我的任务数据库表:

CREATE TABLE IF NOT EXISTS `tasks` (
  `id` int(10) unsigned NOT NULL,
  `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `completed` tinyint(1) NOT NULL DEFAULT '0'
)

如您所见，它是一个简单的 id 字段、name 字段和 completed 字段。我的看法:

<ul>
    @foreach($tasks as $task)
        <li>{!! $task->name !!}</li>
    @endforeach
</ul>

所以我基本上只需要一个指向正确方向的指针来进行实际的 AJAX 调用。

Answer 1

我建议您使用GET请求，来调用ajax，首先将id绑定(bind)到li元素

@foreach($tasks as $task)
    <li data-id='{!! $task->id !!}'>{!! $task->name !!}</li>
@endforeach

并使用这个 jQuery 函数:

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

最后，将您的路线从发布更改为获取。

 Route::get(...