通过ajax更新laravel数据库

Question

问题

如何使用复选框使用 Ajax 更新我的表的 only 1 column？

说明

我想使用复选框并更新我的active 列，值将是1 或0。如果检查值为1，否则为0。

代码

html

<label class="switch">
  <input type="checkbox" data-name="active" data-id="{{ $courier->id }}">
  <span class="slider round"></span>
</label>

data-name 是我的专栏名称

data-id 是我的行号

controller function

public function Updatecourierstatus(Request $request) {
        try {
            $id = $request->input('id');
            $field = $request->input('name');

            $courier = Courier::findOrFail($id);
            $courier->{$field} = //must get 1 or 0 here;
            $courier->save();
        } catch (Exception $e) {
            return response($e->getMessage(), 400);
        }
        return response('', 200);
    }

route

Route::post('/Updatecourierstatus', 'CourierController@Updatecourierstatus')->name('Updatecourierstatus');
});

JavaScript

不知道如何处理这部分！

更新

我的最新代码：

script

<script>
    $(function (){
        $.ajaxSetup({
          headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('label.switch input[type="checkbox"]').on('click', function (event) {
          $.post("{{route('Updatecourierstatus')}}", { 
            id: $(this).data("id"),
            name: $(this).data("name"),
            state: $(this).is(":checked") ? 0 : 1 // toggles
          }).done(function(data) {
              console.log(data)
          });
        });
    });
</script>

controller

public function Updatecourierstatus(Request $request) {
            try {
                $id = $request->input('id');
                $field = $request->input('name');
                $state = $request->input('state');

                $courier = Courier::findOrFail($id);
                $courier->{$field} = (int) $state;
                $courier->save();
            } catch (Exception $e) {
               return response($e->getMessage(), 400);
            }
            return response('', 200);
    }

html

<label class="switch">
  <input class="status" type="checkbox" data-name="active" data-id="{{ $courier->id }}" {{ $courier->active == '1' ? 'checked' : ''}}>
  <span class="slider round"></span>
</label>

问题

1. 我的开关按钮没有按预期工作，为价值1 和关闭 对于值0，始终关闭。
2. 我添加了{{ $courier->active == '1' ? 'checked' : ''}}，以便 根据数据库中的值正确打开和关闭，但从那时起我的值 不会在 DB 中改变，它们会保持当前值并且不会得到 更新了

已修复

问题是 state: $(this).is(":checked") ? 0 : 1 作为“What are the PHP operators “?” and “:” called and what do they do?”解释我必须使用 state: $(this).is(":checked") ? 1 : 0

Answer 1

我猜你显示的 html 使用的是 lib，你应该检查 lib 以获取详细信息，它们可能会提供可以使用的被触发的事件。

如果没有，你可以像下面这样做，只发送一个 ajax 请求，当你切换值时，从查看代码 name 看起来任意设置，你可能不应该这样做，以防有人发送喜怒无常的列名。

好的，所以您可以在单击复选框时执行 ajax 请求，并从数据属性中获取 id 和 name。

<script>
    $(function (){
        $('label.switch input[type="checkbox"]').on('click', function (event) {
          $.post("/Updatecourierstatus", { 
            id: $(this).data("id"),
            name: $(this).data("name"),
            state: $(this).is(":checked") ? 0 : 1 // toggles
          }).done(function(data) {
              console.log(data)
          });
        });
    });
</script>

然后在您的控制器中，添加该值：

public function Updatecourierstatus(Request $request) {
    try {
        $id = $request->input('id');
        $field = $request->input('name');
        $state = $request->input('state');

        $courier = Courier::findOrFail($id);
        $courier->{$field} = (int) $state;
        $courier->save();
    } catch (Exception $e) {
       return response($e->getMessage(), 400);
    }
    return response('', 200);
}

Answer 2

如果复选框被您的 ajax 数据参数（如 id 和 name do）选中，您应该提交一个变量显示。然后您可以在控制器中接收它并保存它。

Answer 3

您可以使用 jquery 轻松做到这一点：

$('input.checkbox').on('change', function(e) {
    $.ajax({
      type: "POST",
      url: url,
      data: {value: $(this).val(), id: $(this).data('id'), name: $(this).data('name')},
      success: function() {
        console.log('submitted')
      }
    });
});