时间戳

首页 > 解决方案 > Laravel 5.6 Ajax Jquery 模态插入数据库不起作用

jquery - Laravel 5.6 Ajax Jquery 模态插入数据库不起作用

问题描述

我是 Laravel 5.6 的新手，并且在数据库中使用 Ajax 进行 CRUD，当我尝试从我的模式中插入数据时它不起作用。在迁移文件中，我已将默认“id”更改为“asset_category_id”并在模型类中对其进行保护，因此在我的数据库中，列是asset_category_id、category、created_at 和updated_at。

控制器

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Asset_category;
use Illuminate\Support\Facades\Response;
use Illuminate\Validation\Validator;
use Illuminate\Support\Facades\Input;
use App\Http\Requests;

class Asset_categoriesController extends Controller
{

    public function index(){
        $asset_categories = Asset_category::all();
        return view('/asset_category/index', compact('asset_categories'));
    }

    public function addCategory(Request $request){
        $rules = array(
            'category' => 'required'
        );
        $validator = Validator::make(Input::all(), $rules);
        if ($validator->fails())
            return response::json(array('errors'=> $validator->getMessageBag()->toarray()));

        else{
            $asset_categories = new Asset_category;
            $asset_categories->category = $request->category;
            $asset_categories->save();
            return response()->json($asset_categories);
        }
    }
}

用于插入的引导模式

<!-- /.modal to create a new Asset Category -->

        <div id="create" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">Add Asset Category</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">

                            <div class="form-group row add">
                                <label class="control-label col-sm-2" for="category">Category :</label>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" name="category" class="form-control" id="category" placeholder="Asset Category Here" required>
                                        <p class="error text-center alert alert-danger hidden"></p>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-warning" type="submit" id="add">
                            <span class="glyphicon glyphicon-plus"></span>Save Post
                        </button>
                        <button class="btn btn-warning" type="button" data-dismiss="modal">
                            <span class="glyphicon glyphicon-remove"></span>Close
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
<!-- /.modal -->

JavaScript 代码 （在 Js 代码中，$("add").click(function())下划线表示参数数量无效）

       <script type="text/javascript">
            $(document).on('click','.create-modal', function() {
                $('#create').modal('show');
                $('.form-horizontal').show();
                $('.modal-title').text('Add Asset Category')
            });

            $("#add").click(function(){
              $.ajax({
                  type : 'POST',
                  url : 'addCategory',
                  data : {
                      '_token': $('input[name=_token]').val(),
                      'category': $('input[name=category]').val(),
                  },
                  success: function(data) {
                      if((data.errors)){
                          $('.error').removeClass('hidden');
                          $('.error').text(data.errors.category);
                      }else{
                          $('.error').remove();
             $('#table').append("<tr class='asset_category" + data.asset_category_id + "'>"+
            "<td>" + data.asset_category_id + "</td>"+
            "<td>" + data.category + "</td>"+
            "<td><a class='show-modal btn btn-info btn-sm' data-id='" + data.asset_category_id + "' data-category'" + data.category + "'>"+
            "<i class='fa fa-eye'></i></a>"+
            "<a class='edit-modal btn btn-warning btn-sm' data-id='" + data.asset_category_id + "' data-category'" + data.category + "'>"+
            "<i class='glyphicon glyphicon-pencil'></i></a>"+
            "<a class='delete-modal btn btn-danger btn-sm' data-id='" + data.asset_category_id + "' data-category'" + data.category + "'>"+
            "<i class='glyphicon glyphicon-trash'></i></a>"+
            "</td>"+
            "</tr>");
            }
        },
      });
      $('#category').val('');
    });
        </script>

刀片.php

<table class="table m-0" id="table">

                                                <tr>
                                                    <th>ID</th>
                                                    <th>Category</th>
                                                    <th>Action</th>
                                                    <th class="text-center" width="150px">
                                                        <a href="#" class="create-modal btn btn-success btn-sm">
                                                            <i class="glyphicon glyphicon-plus"></i>
                                                        </a>
                                                    </th>
                                                </tr>
                                                {{csrf_field()}}
                                                @foreach($asset_categories as $asset_category)

                                                    <tr class="asset_category{{$asset_category->asset_category_id}}">
                                                        <td>{{$asset_category->asset_category_id}}</td>
                                                        <td>{{$asset_category->category}}</td>
                                                        <td>
                                                            <a href="#" class="show-modal btn btn-info btn-sm" data-id="{{$asset_category->asset_category_id}}"
                                                               data-category="{{$asset_category->category}}">
                                                                <i class="fa fa-eye"></i>
                                                            </a>

                                                            <a href="#" class="edit-modal btn btn-warning btn-sm" data-id="{{$asset_category->asset_category_id}}"
                                                               data-category="{{$asset_category->category}}">
                                                                <i class="glyphicon glyphicon-pencil"></i>
                                                            </a>
                                                            <a href="#" class="delete-modal btn btn-danger btn-sm" data-id="{{$asset_category->asset_category_id}}"
                                                               data-category="{{$asset_category->category}}">
                                                                <i class="glyphicon glyphicon-trash"></i>
                                                            </a>
                                                        </td>

                                                    </tr>
                                                    @endforeach

                                            </table>

提前感谢您的任何建议。

标签： jqueryajaxlaravellaravel-5bootstrap-modal

解决方案

首先，您将 csrf 令牌放置在错误的位置。它应该就在form标签下方（它将成为带有 name 的隐藏输入字段_token。如果不是，这很可能会在以后给您 419 错误。

其次，您可能想稍微更改一下点击功能：

$(‘#add’).on(‘click’, function (e) {
  e.preventDefault()
  // put your ajax code after this
});

第三，如果在网络选项卡的后端发生某些事情，您总是可以看到错误。这会给你更多的提示。

希望这可以帮助。

推荐阅读