Как обновить (поставить) без обновления с ajax в laravel 6?

Question

Я пытаюсь обновить свои данные без необходимости каждый раз обновлять sh с помощью ajax. Я действительно не использовал ajax в прошлом, так что это очень ново для меня. Я попробовал несколько разных способов из примеров, которые я видел, и это то, что я мог бы собрать сейчас.

В настоящий момент выдает ошибку The PUT method is not supported for this route., а приведенный выше URL остается прежним.

Это то, что я сейчас пробовал:

Blade

<div class="table">
  <div class="tr">
      <span class="td">Name</span>
      <span class="td">New cases</span>
      <span class="td">cases</span>
      <span class="td">deaths</span>
      <span class="td">recoveries</span>
      <span class="td">Submit</span>
    </div>

        @foreach($data as $dat)
        <form class="tr" id="form{{$dat->id}}">
          <input type="hidden" value="{{ csrf_token() }}" id="csrf_token" />
          <input type="hidden" name="id" value="{{$dat->id}}">
          @method('put')
          <span class="td"><input type="text" name="name" value="{{$dat->country_name}}"/></span>
          <span class="td"><input type="text" name="nCases" value="{{$dat->new_cases}}"/></span>
          <span class="td"><input type="text" name="cases" value="{{$dat->cases}}"/></span>
          <span class="td"><input type="text" name="deaths" value="{{$dat->deaths}}"/></span>
          <span class="td"><input type="text" name="recoveries" value="{{$dat->recoveries}}"/></span>
          <span class="td"><input type="submit" name="submit" value="Submit"/></span>
        </form>
        @endforeach
</div>

Сценарий ниже

<script>
$('form').submit(function( event ) {
    event.preventDefault();
    $.ajax({
        action: {{url("/ajaxtest")}},
        type: 'put',
        data: $('form').serialize(), 
        dataType: 'json',
        success: function(response){
            console.log(response);
        },
        error: function( _response ){
            // Handle error
        }
    });
});
</script>

Контроллер

    public function ajaxTest(Request $request) {
        $id = \Request::input('id');
        $cases = \Request::input('cases');
        $nCases = \Request::input('nCases');
        $deaths = \Request::input('deaths');
        $recoveries = \Request::input('recoveries');

        Countries::where("id", $id)->update([
            'cases' => $cases,
            'deaths' => $deaths,
            'new_cases' => $nCases,
            'recoveries' => $recoveries
            ]);
    }

Маршруты

Route::put('/ajaxtest', 'CountriesController@ajaxTest');

Answer 1

Хорошо, у вас есть @method("put") в вашем блейде, поэтому при сериализации формы это входное значение уже находится в ваших данных:

// serialized data looks like
{
    ...
    "_method": "put"
}

Все, что вам нужно, это изменить тип ajax с put до post, это должно помочь

Также вам не нужно указывать @csrf в каждой форме, просто укажите 1 вход для страницы и установите ее значение в заголовках ajax

// in blade
<input type="hidden" value="{{ csrf_token() }}" id="csrf_token" />

// in js
$('form').submit(function( event ) {
event.preventDefault();
let token = $("#csrf_token").val();
$.ajax({
    action: {{url("/ajaxtest")}},
    type: 'post', // CHANGE this line from put to post
    headers: { 'X-CSRF-TOKEN': token }, // ADD token to headers
    data: $(this).serialize(), // serialize the form submitted
    dataType: 'json',
    success: function(response){
        console.log(response);
    },
    error: function( _response ){
        // Handle error
    }
});

});