首页 > 解决方案 > 无需重新加载页面即可保存数据

问题描述

我有一个简单的表单,用户可以在其中填写表单并可以根据需要添加多个输入字段,

这是HTML

  <form id="paramsForms">
                    {{csrf_field()}}
                    <div class="modal-body">
                        <dvi 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[]" id="field1" class="form-control"/>
                                              <input type="number" placeholder="atribute value" name="params_value[]" id="field2"  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" class="btn btn-primary">Save changes</button>
                </div>

                </form>

这是保存表单的js

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

            $.ajax({
              type:"POST",
              url: "/parameters",
              data: $("#paramsForms").serialize(),
              success: function(response){
                console.log(response)
                alert('data saved');
              },
              error: function(error){
                console.log(error)
                alert('Data not saved');
              }
            })
        })

这是控制器存储功能

 public function store(Request $request)
    {
        $parameters = new Parameter;

        $parameters->params_name  = $request->input('params_name');
        $parameters->params_value = $request->input('params_name');
        $parameters->bidders_name = $request->input('bidders_name');

        // dd($parameters);

        $parameters->save();
    }

dd($parameters) 店内函数提供以下内容。

在此处输入图像描述

因此,当我删除dd($parameters)并单击提交按钮时,我在控制台(网络)上收到以下错误。

message: "Argument 1 passed to Illuminate\Database\Grammar::parameterize() must be of the type array, string given, called in C:\xampp\htdocs\roayalad-blog\vendor\laravel\framework\src\Illuminate\Database\Query\Grammars\Grammar.php on line 869

我的代码有什么问题?

标签: phpjquerymysqlajaxlaravel

解决方案


问题是您将params_nameparams_name作为数组发送,但控制器作为字符串处理。在控制器中进行此更改:

public function store(Request $request)
{
    $parameters = new Parameter;

    $record_count = count($request->input('params_name'));

    for($i=0; $i<$record_count; $i++) {
        $parameters->params_name  = $request->input('params_name')[$i];
        $parameters->params_value = $request->input('params_name')[$i];
        $parameters->bidders_name = $request->input('bidders_name')[$i];
        $parameters->save();
    }
}

上面的代码将对每条记录执行一个查询。您也可以进行批量插入。这是链接


推荐阅读