使用带有laravel的ajax提交表单时，避免页面重新加载

我完全不想尝试使用ajax而不是laravel处理表单提交以避免页面重新加载等。但它不起作用，我不知道为什么。 我通过示例搜索了精彩的网页，但似乎没有什么对我有用。 这是我能得到的最接近的。 我的知识有限，但我的抱负很高。 请花一点时间查看我的代码，因为我现在处于精神崩溃的边缘。

这是我的jquery：

$(document).ready(function() { $('#ajax').submit(function(event){ $.ajax({ type: 'POST', url: 'comments', data: $('form#ajax').serialize(), dataType: 'json', }) .done(function(data) { console.log(data); }); event.preventDefault(); }); }); 

这是我在刀片视图中的表单：

 {{ Form::open(array('url'=>'comments', 'id' => 'ajax')) }} {{ Form::hidden('parent_id', null) }} {{ Form::hidden('author', Auth::user()->username) }} {{ Form::textarea('content', null, array('placeholder' => 'Enter your comment here:', 'onfocus' => 'this.placeholder=""')) }}
 {{ Form::submit('Comment', array('class'=>'submit')) }} {{ Form::close() }} 

这是我的控制器：

 public function createComment() { //fixa här så man inte kan kommentera tom kommentar $validate = array('content' => 'required'); $validator = Validator::make(Input::all(), $validate); if($validator->fails()) { return Redirect::to('comments')->withErrors($validator)->withInput(Input::all()); } else { $comment = new Comment(); $comment->parent_id = Input::get('parent_id'); $comment->author = Input::get('author'); $comment->content = Input::get('content'); $comment->save(); } } public function postComment() { if(Request::ajax()) { $this->createComment(); return Response::json(Input::all()); } } public function getCommentsAndForm() { $comments = Comment::orderBy('id')->get(); return View::make('comment')->with('comments', $comments); } 

这是我的路线：

 Route::get('comments', array('uses' => 'CommentController@getCommentsAndForm')); Route::post('comments', array('uses' => 'CommentController@postComment')); 

当我提交表格时，它会消失，没有任何显示。 如果我删除if(Request::ajax()) ，评论会被发布，但表单仍然消失，而不是空页面我在JSON中获得发布的评论。 当我重新加载页面时，评论显示为我想要的。 问题是什么？ 我究竟做错了什么？ 我只希望发布的评论显示在我的表单上方而不重新加载页面，是否有解决方案？

Answer 1

 $(document).ready(function() { $('#ajax').submit(function(event){ event.preventDefault(); $.ajax({ type: 'POST', url: 'comments', data: $('form#ajax').serialize(), dataType: 'json', }) .done(function(data) { console.log(data); }); //just to be sure its not submiting form return false; }); }); 

这里重要的是防止表单提交。 您可以尝试将提交更改为按钮。