如何在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">&nbsp; &nbsp; &nbsp; &nbsp; <form class="btn-submit" id="ajax">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>Academic Year</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="academic_year" class="form-control" placeholder="title" required="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>Description</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="academic_description" class="form-control" placeholder="details" required="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>Semester</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="academic_semester" class="form-control" placeholder="details" required="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="hidden" name="_token" value="{{ csrf_token() }}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="btn btn-success">Submit</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; $("#ajax").on('submit', function(event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "post",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "{{route('postinsert')}}",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: $('#ajax').serialize(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Data Save: " + data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; </script>路线：添加路线名称Route::post('insert-academic', 'AcademicYearController@addAcademic')->name('postinsert);控制器方法：public function addAcademic(Request $request){&nbsp; &nbsp; &nbsp; &nbsp; $aca_year = new AcademicYear;&nbsp; &nbsp; &nbsp; &nbsp; $aca_year->academic_year = $request->academic_year;&nbsp; &nbsp; &nbsp; &nbsp; $aca_year->academic_description = $request->academic_description;&nbsp; &nbsp; &nbsp; &nbsp; $aca_year->academic_semester = $request->academic_semester;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; if ($aca_year->save()) {&nbsp; &nbsp; &nbsp; &nbsp; return response()->json(['status'=> 'success']);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; return response()->json(['status'=> 'error']);&nbsp; &nbsp; }}

Answer 2

使用提交而不是单击。如果你绑定了点击，当你点击表单中的任意位置时就会触发。您需要绑定提交事件。$("#ajax").on('submit', function(event) {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type: "post",&nbsp; &nbsp; &nbsp; &nbsp; url: "{{ url('postinsert') }}",&nbsp; &nbsp; &nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; &nbsp; &nbsp; data: $('#ajax').serialize(),&nbsp; &nbsp; &nbsp; &nbsp; success: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Data Save: " + data);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; error: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;alert("Error")&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});