使用 ajax 和 laravel 提交表单时避免页面重新加载答案

【问题标题】：Avoid page reload when submitting form using ajax with laravel使用 ajax 和 laravel 提交表单时避免页面重新加载
【发布时间】：2014-04-30 19:19:47
【问题描述】：

我完全被困在尝试使用 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=""')) }}<br/>
        {{ 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())，cmets 会被发布，但表单仍然消失，而不是空页面，我会以 JSON 格式获得发布的评论。当我重新加载页面时，cmets 会按我的意愿显示。问题是什么？我究竟做错了什么？我只希望发布的评论显示在我的表单上方而不重新加载页面，有解决方案吗？

【问题讨论】：

由于您在 js 中使用 done()，我认为您还应该返回状态码 return Response::json(Input::all(),200);
@DimitrisKontoulis 我试过你说的，但还是同样的问题。
但是你对返回的 json 什么都不做。我可以看到您将其记录在控制台中，而没有其他任何内容。
@DimitrisKontoulis 好的，我应该如何处理返回的 json？这超出了我的知识范围。
您必须对其进行解析并根据需要显示它。现在你得到一个 json 对象，你不能指望它自己显示在你的 html 中：P

标签： javascript php jquery ajax laravel-4

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

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

【讨论】：