Question

我有一段代码，我想在laravel 5中使用ajax从数据库中添加/插入数据。我是ajax和laravel的初学者，我不知道为什么它会刷新我的页面。

这是我到目前为止所做的事情：在我看来，我有一个这样的模态：

<div class="modal fade" id="addcategory" tabindex="-1" role="dialog" aria-labelledby="contactLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="panel-title" id="contactLabel"><span class="glyphicon glyphicon-info-sign"></span> Add Category</h4>
        </div>
        <form id="frmAddcategory">
        <div class="modal-body" style="padding: 5px;">
                <div class="row">
                   <div class="col-lg-12 col-md-12 col-sm-12 {{ $errors->has('email') ? ' has-error' : '' }}" style="padding-bottom: 10px;">
                        <input class="form-control" name="catname" placeholder="Category name" type="text" required />
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 {{ $errors->has('email') ? ' has-error' : '' }}">
                        <textarea style="resize:vertical;" class="form-control" placeholder="Description" rows="4" name="catdesc" required></textarea>
                    </div>
                </div>                
            </div>  
            <div class="panel-footer" style="margin-bottom:-14px;">                
                <button class="btn btn-success btn-sm" onclick="addCategoryAjax()">Submit</button>
                    <!--<span class="glyphicon glyphicon-ok"></span>-->
                <input type="reset" class="btn btn-danger btn-sm" value="Clear" />
                    <!--<span class="glyphicon glyphicon-remove"></span>-->
                <button style="float: right;" type="button" class="btn btn-default btn-close btn-sm" data-dismiss="modal">Close</button>
            </div>
            {{ csrf_field() }}
        </form>
        </div>
    </div>
</div>

在我的ajax中提交按钮，因为你可以看到我在我的表单上使用了<button class="btn btn-success btn-sm" onclick="addCategoryAjax()">Submit</button>。我在点击时添加了这个功能。

这是我的ajax功能：

function addCategoryAjax() {
    $.ajax({         
        url: "{{ route('admin.addcat') }}",        
        type: "POST",
        data: $("#frmAddcategory").serialize(),
        dataType: "JSON",
        success: function(data) {

        }
    }); 
}

这是我的控制器：

 public function addCategory(Request $request) 
    {
        $stat = "published";

        DB::table('categories')->insert([
        'name'=>$request->catname, 
        'description'=>$request->catdesc, 
        'status'=>$stat,
        'created_at' =>  \Carbon\Carbon::now(), # \Datetime()
        'updated_at' => \Carbon\Carbon::now()  # \Datetime()
        ]);

    }

Answer 1

您应该阻止按钮的默认操作，例如：

e.preventDefault();

您可以将event传入函数内联函数，该函数将成为符合W3C标准的浏览器中引发事件的事件对象。

所以你的代码应该是：

<强> HTML ：

<button class="btn btn-success btn-sm" onclick="addCategoryAjax(event)">Submit</button>

<强>的js ：

function addCategoryAjax(e) {
    e.preventDefault();

    $.ajax({         
        url: "{{ route('admin.addcat') }}",        
        type: "POST",
        data: $("#frmAddcategory").serialize(),
        dataType: "JSON",
        success: function(data) {

        }
    }); 
}

Answer 2

         <form  name="itemGroupForm" id="itemGroup" data-parsley-validate="" method="post"  onsubmit="return submitFormItemGroup();">
 function submitFormItemGroup() {

  var form_data = new FormData(document.getElementById("itemGroup"));
  form_data.append("label", "WEBUPLOAD");
  $.ajax({
      url: "{{URL::to('addItemGroupAjax')}}",
      type: "POST",
      data: form_data,
      processData: false,  // tell jQuery not to process the data
      contentType: false   // tell jQuery not to set contentType
  }).done(function( data ) {
    console.log(data);
})
Route::post('/addItemGroupAjax','ItemGroupsController@storeAjax');

在laravel 5

2 个答案: