如何在laravel中使用ajax成功插入数据库？

Question

请一直尝试使用 laravel 中的 ajax 请求将数据插入我的数据库。我收到错误，但我无法真正找到解决方案。以下是我到目前为止所做的事情。标头<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><meta name="_token" content="{{csrf_token()}}"/>刀片锉刀<div class="content">        <form class="btn-submit" id="ajax" action="{{URL::to('insert-academic')}}">           <div class="form-group">                <label>Academic Year</label>                <input type="text" name="academic_year" class="form-control" placeholder="title" required="">            </div>            <div class="form-group">                <label>Description</label>                <input type="text" name="academic_description" class="form-control" placeholder="details" required="">            </div>            <div class="form-group">                <label>Semester</label>                <input type="text" name="academic_semester" class="form-control" placeholder="details" required="">            </div>                       <div class="form-group">                <button class="btn btn-success">Submit</button>            </div>        </form>       </div><script type="text/javascript">    $("#ajax").click(function(event) {    event.preventDefault();    $.ajax({        type: "post",        url: "{{ url('postinsert') }}",        dataType: "json",        data: $('#ajax').serialize(),        success: function(data){              alert("Data Save: " + data);        },        error: function(data){             alert("Error")        }    });});</script>路线Route::post('insert-academic', 'AcademicYearController@addAcademic');

Answer 1

Blade 文件 - 删除表单操作属性，因为它没有用。

<div class="content">

        <form class="btn-submit" id="ajax">

            <div class="form-group">

                <label>Academic Year</label>

                <input type="text" name="academic_year" class="form-control" placeholder="title" required="">

            </div>

            <div class="form-group">

                <label>Description</label>

                <input type="text" name="academic_description" class="form-control" placeholder="details" required="">

            </div>

            <div class="form-group">

                <label>Semester</label>

                <input type="text" name="academic_semester" class="form-control" placeholder="details" required="">

            </div>

         <input type="hidden" name="_token" value="{{ csrf_token() }}">

            <div class="form-group">

                <button class="btn btn-success">Submit</button>

            </div>

        </form>

    </div>

    <script type="text/javascript">

        $("#ajax").on('submit', function(event) {

            event.preventDefault();

            $.ajax({

                type: "post",

                url: "{{route('postinsert')}}",

                dataType: "json",

                data: $('#ajax').serialize(),

                success: function(data){

                    alert("Data Save: " + data);

                },

                error: function(data){

                    alert(data);

                }

            });

        });

    </script>

路线：添加路线名称

Route::post('insert-academic', 'AcademicYearController@addAcademic')->name('postinsert);

控制器方法：

public function addAcademic(Request $request){

        $aca_year = new AcademicYear;

        $aca_year->academic_year = $request->academic_year;

        $aca_year->academic_description = $request->academic_description;

        $aca_year->academic_semester = $request->academic_semester;

     

    if ($aca_year->save()) {

        return response()->json(['status'=> 'success']);

    } else {

        return response()->json(['status'=> 'error']);

    }

}

Answer 2

使用提交而不是单击。如果你绑定了点击，当你点击表单中的任意位置时就会触发。您需要绑定提交事件。

$("#ajax").on('submit', function(event) {

    event.preventDefault();

    $.ajax({

        type: "post",

        url: "{{ url('postinsert') }}",

        dataType: "json",

        data: $('#ajax').serialize(),

        success: function(data){

              alert("Data Save: " + data);

        },

        error: function(data){

             alert("Error")

        }

    });

});