在 laravel 5 中使用 ajax 插入数据时，页面刷新和数据不会添加答案

【问题标题】：page refreshes and data won't add when inserting data using ajax in laravel 5在 laravel 5 中使用 ajax 插入数据时，页面刷新和数据不会添加
【发布时间】：2017-09-14 06:06:55
【问题描述】：

我有一段代码，我想在 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()
        ]);

    }

【问题讨论】：

标签： javascript php jquery ajax laravel-5.4

【解决方案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) {

        }
    }); 
}

【讨论】：

您好，先生，您可以帮我解决其他问题吗？
你的“其他问题”是什么意思？
这个问题超出了我可以再问你一次吗？
你的意思是插入数据库？是不是去action方法public function addCategory(Request $request)？
不，它已经插入。我在表单验证中遇到了另一个问题

【解决方案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');

【讨论】：