javascript - 当使用ajax在单行中切换按钮时，laravel将状态更新为0或1

Question

我对 Laravel 比较陌生。当切换按钮而不重新加载页面时，我试图更新 mysql 中的“is_active”列。表格的每一行都有该按钮。我还尝试在切换按钮时显示弹出消息，其效果与引导删除确认模式相同。

到目前为止，我要做的就是使切换按钮正常工作，但是当我尝试切换按钮时，数据库没有发生任何更改。我在想是否应该使用复选框的表单

已更新

这就是我的按钮在 html 中的样子

@foreach($system_functions as $function)
    <input type="hidden" id="id_input" value="{{$function->id}}" >
    @if($function->group_id == 1)
        <tr>
            <td>{!! $function->name !!}</td>
            <td><input class="toggle_status" type="checkbox" @if($function->is_active) checked @endif id="is_active" name="is_active" value="on" data-toggle="toggle"></td>
        </tr>
    @endif
@endforeach

我在 Controller 中也有更新功能

public function update(Request $request, $id)
{
    $function=SystemFunction::where('id',$id)->first();
    if($request->get('is_active')==='on'){
        $is_active=1;
    } else{
        $is_active=0;
    }
    $function->update([
        'is_active' => $is_active
    ]);
    return redirect('admin/system-functions')->with('status','SUCCESSFUL');
}

我在我的 route 调用它

Route::group(array('prefix' => 'admin', 'namespace' => 'Admin', 'middleware' => 'staff'), function () {
    Route::post('/system-functions', 'SystemFunctionController@update')->name('system-functions');
}

我的 js 在我看来是这样的

@section('script')
<script type="text/javascript">
    $(document).ajaxStop(function () {
        $('.toggle_status').on('click', function (e) {
            var is_checked = false
            if ($(this).is(':checked')) {
                is_checked = true;
            }
            $.ajax({
                type: 'POST',
                url: '{{ route('admin.system-functions') }}', // use proper route to system-functions here
                async: true,
                data: {
                    is_checked: is_checked,
                    id: {{ $function->id }}
                },
                success: function (result) {
                    alert('Toggle successfull'); // use proper alert message here
                    e.stopImmediatePropagation();
                    return false;
                }
            });
        });
    });
</script>
@endsection

控制台错误 console error

Answer 1

html

<tr>
    <td>{!! $function->id !!}</td>
    <td>{!! $function->name !!}</td>
    <td><input class="togglefunction" type="checkbox" @if($function->is_active) checked @endif id="is_active" name="is_active"  value="on" data-toggle="toggle" data-fid="{{$function->id}}"></td>
 </tr>

路线

Route::post('/system-functions', 'SystemFunctionController@update')->name('update-system-function');

在模型中

public function toggleIsActive()
     {
            $this->is_active= !$this->is_active;
            return $this;
     }

然后使用像

public function update(Request $request)
{
    $function=SystemFunction::where('id',$request->id)->first();
    $function->toggleIsActive()->save();
    return redirect('admin/system-functions')->with('status','successful');
}

JavaScript:

$('.togglefunction').on('click',function(){  
    //send value by ajax to server
    $.ajax({
        url:'{{route('update-system-function')}}',
        type:'GET',
        data:"{id:$(this).data('fid')}"
    }).done(function(response) {
      //success
       }).fail(function(error){
      //failure
       })
});