Laravel技巧库

评论提交Ajax化

此课程是收费课程,请先购买或加入会员后再访问。

这一集要实现的是ajax提交评论,做完后,再次提交评论,页面就不会刷新了。这样对用户来说,体验会好的多。
在做ajax之前,一定要确认,meta标签和common.js中,有了csrf对应的代码。如果你之前已经完成了ajax上传图片部分的课程,那就肯定和我一样已经有了这些东西了。在laravel中没有这些代码,那你的ajax一定会报错的。
现在先来写一个最简单的ajax

controller

public function store(Request $request)
{
    //return 'hello';
    return $request->all();
}

js

<script>
    $(function () {
        $("#store-comment").click(function () {
            $.post("/comments", $("form").serialize(), function (data) {

            })

            return false;
        })
    })
</script>

Tips: serialize()的意思是序列化元素。你可以简单的理解成,获取表单的所有数据。

看network后发现,ajax已经通了。

view

shared目录中新建一个_comment.blade.php,复制评论列表的这一段代码过去。

<li class="am-comment">
    <img src="{{$comment->user->avatar()}}" alt="" class="am-comment-avatar" width="48" height="48">

    <div class="am-comment-main">
        <header class="am-comment-hd">
            <div class="am-comment-meta">
                <span class="am-comment-author">{{$comment->user->name}}</span>
                {{$comment->created_at->diffForHumans()}}
            </div>
        </header>
        <div class="am-comment-bd"><p>{!! markdown($comment->content) !!}</p></div>
    </div>
</li>

controller

public function store(Request $request)
{
    $comment = Comment::create($request->all());
    return view('shared._comment', compact('comment'));
}

控制器中,现在应该做的是,当插入数据库后,返回一下这个片段。并且把新增的这条数据,传过去,那他里面就会显示这条数据对应的html了。同样的通过network测试一下

js

<script>
    $(function () {
        $("#store-comment").click(function () {
            $.post("/comments", $("form").serialize(), function (data) {
                $(".am-comments-list").append(data);
                $("textarea").val('');
                $('pre > code').each(function () {
                    hljs.highlightBlock(this);
                });
            })

            return false;
        })
    })
</script>

进一步修改js代码,php那边插入到数据库后,js就要用append将这条信息动态的添加到html中。
然后清空表单。
代码还要重新的高亮一下。

Don't repeat

因为新增的comment和循环部分的html是一模一样的,那就直接include一下就好了

@foreach($comments as $comment)
    @include('shared._comment')
@endforeach

现在就注册ITFun.tv会员
持续关注IT界最新技术,随时更新相关课程。在线学习IT课程或直接报名参加线下武汉PHP、Web前端培训。

仅仅30秒钟就可以简单注册

会员注册(免费)
×