如何在 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');

控制器文件

 public function addAcademic(Request $request)
    {
        $aca_year = new AcademicYear;
        $aca_year -> academic_year = $request->input('academic_year');
        $aca_year -> academic_description = $request->input('academic_description');
        $aca_year -> academic_semester = $request->input('academic_semester');
        $aca_year->save();



    if ($aca_year) {
        return response()->json([
            'status'     => 'success']);
    } else {
        return response()->json([
            'status' => 'error']);
    }
    }

出现错误..请问如何成功地将数据添加到数据库中

Answer 1

使用提交而不是点击。如果您绑定单击，它将在您单击表单中的任意位置时触发。需要绑定提交事件。

$("#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")
        }
    });
});

Answer 2

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

<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']);
    }
}