Сохранение данных в базу данных без перезагрузки с использованием ajax в laravel

Question

У меня есть форма, в которой я могу добавить несколько полей ввода и сохранить их в базе данных, используя ajax

Вот моя форма HTML

<form id="paramsForms" method="POST">
    {{csrf_field()}}
    {{ method_field('POST') }}

    <div class="modal-body">
        <div class="container h-100">
            <div class="d-flex justify-content-center">

                <div class="card mt-5 col-md-12 animated bounceInDown myForm" id="multiple-container">
                    <div class="card-header">
                        <h4>Bidders Information</h4>
                    </div>
                    <div class="card-body" id="add_info">
                        <div id="dynamic_container">

                            <small id="bidder">Bidder 1</small>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
                                </div>
                                <input type="text" placeholder="Bidders Name" name="bidders_name[]" class="form-control"/>
                            </div>
                            <div class="input-group mt-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
                                </div>
                                <input type="text" placeholder="atribute name" name="params_name[]"  class="form-control"/>
                                <input type="number" placeholder="atribute value" name="params_value[]" class="form-control"/>
                                <a class="btn btn-secondary btn-sm moreinput_field" id="add_more_input">
                                    <i class="fa fa-plus-circle"></i> 
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer" id="card-footer">
                        <a class="btn btn-success btn-sm" id="add_more"><i class="fa fa-plus-circle"></i> Add</a>
                        <!-- <button class="btn btn-success btn-sm float-right submit_btn"><i class="fas fa-arrow-alt-circle-right"></i> Submit</button> -->
                    </div>

                </div>


            </div>
        </dvi>
    </div>


    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" id="save" class="btn btn-primary">Save changes</button>
    </div>

</form>

Здесь приведены js для отправки входных данных

$("#paramsForms").on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url: '{{ route("parameters.store") }}',
        method: "POST",
        data: $(this).serialize(),
        dataType: 'json',
        beforeSend:function() {
            $("#save").attr('disabled', 'disabled');
        },
        success:function (data) {
            console.log(data);
            alert('Data successfull saved');
        },
        error:function (error) {
            console.log(error)
            alert('Data not saved');
        }
    })   
})

Вот мои настройки маршрута

Route::get('/parameters', "ParameterController@index");
Route::post('parameters/store', 'ParameterController@store')->name('parameters.store');

Вот функция хранения в моем контроллере для сохранения данных

public function store(Request $request)
{
    if($request->ajax())
    {
        $rules = array(
            'params_name.*'  => 'required',
            'params_value.*'  => 'required',
            'bidders_name.*' => 'required'
        );
        $error = Validator::make($request->all(), $rules);
        if($error->fails())
        {
            return response()->json([
                'error'  => $error->errors()->all()
            ]);
        }

        $params_name = $request->params_name;
        $params_value =$request->params_value;
        $bidders_name =$request->bidders_name;

        for($count = 0; $count < count($params_name); $count++)
        {
            $data = array(
                'params_name'   => $params_name[$count],
                'params_value'  => $params_value[$count],
                'bidders_name'  => $bidders_name[$count],

            );
            $insert_data[] = $data; 
        }

        Parameter::store($insert_data);
        return response()->json([
            'success'  => 'Data Added successfully.'
        ]);
    }
}

Теперь, когда пользователь нажимает кнопку Сохранить, чтобы отправитьданные я получаю следующую ошибку.

message: "The POST method is not supported for this route. Supported methods: GET, HEAD, PUT, PATCH, DELETE."

Я пробовал большинство SO-решений, предоставленных другими парнями, но я все еще получаю ошибку

что я делаю неправильно в моих кодах?

Answer 1

Ваш пост jQuery кажется неправильным.

попробуйте заменить method: "POST" на type: 'POST'

см .: https://api.jquery.com/jQuery.post/

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

также вы этого не делаетенужно {{ method_field('POST') }} используется для запросов PUT, DELETE, PATCH, которые не поддерживаются некоторыми браузерами.

Answer 2

Вы должны добавить

    <meta name="csrf-token" content="{{ csrf_token() }}" />

в заголовке вашего HTML-документа и

, тогда вам нужно добавить несколько кодов в ваш jQuery:

$("#paramsForms").on('submit', function(e) {
    e.preventDefault();
    $.ajaxSetup({

            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    $.ajax({
        url: '{{ route("parameters.store") }}',
        method: "POST",
        data: $(this).serialize(),
        dataType: 'json',
        beforeSend:function() {
            $("#save").attr('disabled', 'disabled');
        },
        success:function (data) {
            console.log(data);
            alert('Data successfull saved');
        },
        error:function (error) {
            console.log(error)
            alert('Data not saved');
        }
    })   
})

Answer 3

Просто предположение, но вы пытались не использовать имя вложенного маршрута? Или, по крайней мере, попробуйте определить ваши маршруты, как это, если вы действительно хотите, чтобы вложенное имя:

Route::prefix('parameters')->name('parameters.')->group(function () {
    Route::post('store', 'ParameterController@store')->name('store');
    Route::get('/', "ParameterController@index");
});

см. https://laravel.com/docs/5.8/routing#route-group-name-prefixes

Answer 4

Вносит изменения из:

<form id="paramsForms" method="POST">
                        {{csrf_field()}}
                        {{ method_field('POST') }}

в

<form id="paramsForms">
                        {{csrf_field()}}

и попробуйте. Кроме того, если это не работает, запустите php artisan route:cache, чтобы очистить кэш маршрутов.

Answer 5

Изменить порядок маршрута:

Route::post('parameters/store', 'ParameterController@store')->name('parameters.store');
Route::get('/parameters', "ParameterController@index");