在 laravel 中使用 ajax 将数据保存到数据库而不重新加载

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

更改您的路线顺序：

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

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

你应该添加

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

从以下位置进行更改：

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

到

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

并尝试。另外，如果它不起作用，请运行php artisan route:cache 以清除路由缓存。