Laravel 5.6 Ajax Jquery Modal插入数据库无法正常工作

时间:2018-06-15 16:21:42

标签: jquery ajax laravel laravel-5 bootstrap-modal

我是Laravel 5.6的新手,并且使用Ajax for CRUD进入数据库,当我尝试从我的模态中插入数据时,它不起作用。在迁移文件中,我更改了默认" id"到" asset_category_id"并在模型类中保护它,所以在我的数据库中,列是asset_category_id,category,created_at和updated_at。

控制器

plot_ly()

插入的引导模式

<?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);
        }
    }
}

JavaScript代码 (在Js代码中,$(&#34; add&#34;)<!-- /.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 --> 加下划线表示参数数量无效)

.click(function())

blade.php

       <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>

提前感谢您提出任何建议。

2 个答案:

答案 0 :(得分:0)

首先,您将csrf令牌放在错误的位置。它应该在form标记之下(它将成为名为_token的隐藏输入字段。如果没有,这很可能会在以后给您419错误。

其次,您可能想稍微更改点击功能:

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

第三,如果在“网络”选项卡的后端发生了某些事情,您始终可以看到错误。这会给你更多提示。

希望这有帮助。

答案 1 :(得分:-1)

更改按钮输入=&#34;提交&#34; 输入=&#34;按钮&#34;

尝试:

$('form #add').on('click', function(){

                    >   alert('add');

 })

也许它可以帮到你