通過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是我的行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

不確定如何處理此部分！

UPDATE

我的最新代碼：

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' : ''}} {{ $courier->active == '1' ? 'checked' : ''}}是為了根據數據庫中的值正確地打開和關閉，但是從那時起，我的值就不會在數據庫中更改，它們會保持當前值並且不會更新

固定

問題是state: $(this).is(":checked") ? 0 : 1 state: $(this).is(":checked") ? 0 : 1為“ PHP運算符“？”和“：”分別是什么，它們做什么？ ”解釋說，我必須使用state: $(this).is(":checked") ? 1 : 0 state: $(this).is(":checked") ? 1 : 0

Answer 1

我猜您的顯示正在使用lib的html，您應該檢查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

您應該提交一個變量顯示，看看是否已使用ID和名稱do這樣的ajax數據參數選中了該復選框，然后可以在控制器中接收並保存它。

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