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

我在控制器中也有更新功能

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::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

控制台错误 控制台错误

标签： javascriptphpjqueryajaxlaravel

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