ajax实现评论功能

<script type="text/javascript">
    //alert(GetQueryString('artid'));
    $(document).ready(function(){
        var str = window.location.href;
        var sta = str.lastIndexOf("/");
        var end = str.lastIndexOf(".");
        var artid = str.substring(sta+1,end);//返回url中的artid的值
        var lock = false; //声明lock为false
        getcomment();

        $('#submit').click(function(){
            if($('#session').text()==''){
                layer.alert('你还没有登录!', {icon: 5});
                return false;
            }else{
                var contents = $('#comment').serialize();
                if(""==$('#context').val()){
                    layer.alert('评论内容不能为空!', {icon: 2});
                    return false;
                }else{
                    $.ajax({
                        type:"post",
                        dataType:"json",
                        data:contents,
                        url:"{:url('Comment/add')}",
                        success:function(data){
                            if(data==1){
                                $('#context').text('');
                                layer.alert('评论成功!', {icon: 1});
                            }else{
                                layer.alert('评论失败!', {icon: 2});
                                return false;
                            }
                            getcomment();
                        }
                    });
                }
            }

        });

        function getcomment(){
            $.ajax({
                type:"post",
                dataType:"json",
                data:{artid:artid},
                url:"{:url('Article/getcomment')}",
                success:function(data){
                    $('#pinglunqu').empty(); //jquery有缓存,清空
                    $.each(data, function (index, val) {
                        if(val.parent_id==0){
                            var txt = '<div><div style="height: 74px;display: flex;padding: 0 5px;" id="pinglun'+val.id+'"><div style="flex: 1;" align="center"><img src="'+val.user_pic+'" alt="暂无照片" style="height: 61px;width: 61px;" /></div><div style="flex: 8;border-bottom: 1px solid #ccc;display: flex;flex-direction: column;font-family:initial;padding: 5px;"><div style="display: flex;justify-content: space-between;"><div><span style="color: blue">'+val.user_name+'</span><span>'+val.create_time+'</span></div><span id="huifu'+val.id+'">回复▼</span></div><span>'+val.content+'</span></div></div></div>';
                            $('#pinglunqu').append(txt);
                        }else{
                            var txt = '<div><div style="height: 74px;display: flex;margin-left:81px;padding:0 5px;" id="pinglun'+val.id+'"><div style="flex: 1;" align="center"><img src="'+val.user_pic+'" alt="暂无照片" style="height: 61px;width: 61px;" /></div><div style="flex: 8;;display: flex;flex-direction: column;padding: 5px;font-family:initial;border-bottom: 1px solid #ccc;"><div style="display: flex;justify-content: space-between;"><div><span style="color: blue">'+val.user_name+'</span><span>'+val.create_time+'</span></div><span id="huifu'+val.id+'">回复▼</span></div><span><span style="color: blue">'+val.huifu+'</span>'+val.content+'</span></div></div></div>';
                                $('#pinglunqu').append(txt);
                        }

                        $('#huifu'+val.id+'').click(function(){
                            if($('#pinglun'+val.id+'').next().length>0){
                                $('#pinglun'+val.id+'').next().remove();
                            }else{
                                var divhtml = '<div style="margin:3px 5px 3px 94px;border: 1px solid #ccc;padding: 3px;"><div><form id="comment'+val.id+'"><input type="hidden" name="parent_id" value="'+val.id+'" /><input type="hidden" name="article_id" value="'+val.article_id+'" /><input type="hidden" name="user_id" value="{$Request.session.id}" />@'+val.user_name+':<textarea id="context'+val.id+'" name="content" style="width: 99%; height: 50px;margin-top:5px;"></textarea></form></div><div style="margin-top:5px;margin-right:6px;text-align:right;"><input style="height: 35px;width: 50px;background-color: #5CB85C;border-radius: 5px;" type="submit" value="评论" id="submit'+val.id+'">&nbsp;&nbsp;<input type="submit" value="取消" style="height: 35px;width: 50px;background-color: #A3A3BB;border-radius: 5px;" id="quxiao'+val.id+'"></div></div>';
                                $('#pinglun'+val.id+'').after(divhtml);         //新增div
                            }
                        });


                        $('.last').on('click','#submit'+val.id+'',function(){
                            //$('#submit'+val.id+'').attr('disabled',true);
                            if(lock){
                                layer.alert('你的评论太频繁了,请稍后再试!', {icon: 5});
                                return false;
                            }
                            lock = true;
                            //30秒后lock值改为false时,才可以继续评论
                            setTimeout(function(){
                                lock = false;
                            },30000)
                            if($('#session').text()==''){
                                layer.alert('你还没有登录!', {icon: 5});
                                return false;
                            }else{
                                var contents = $('#comment'+val.id+'').serialize();
                                if(""==$('#context'+val.id+'').val()){
                                    layer.alert('评论内容不能为空!', {icon: 2});
                                    return false;
                                }else{
                                    $.ajax({
                                        type:"post",
                                        dataType:"json",
                                        data:contents,
                                        url:"{:url('Comment/add')}",
                                        success:function(data){
                                            if(data==1){
                                                $('#pinglun'+val.id+'').next().remove();
                                                $('#plnum').text(parseInt($('#plnum').text())+1);
                                                layer.alert('评论成功!', {icon: 1});
                                            }else{
                                                layer.alert('评论失败!', {icon: 2});
                                            }
                                            getcomment();
                                        }
                                    });
                                }
                            }

                        });

                        $('.last').on('click','#quxiao'+val.id+'',function(){
                            $('#pinglun'+val.id+'').next().remove();
                            return false;
                        });
                    });
                }
            });
        }
    });
</script>

猜你喜欢

转载自blog.csdn.net/zdklhh/article/details/89462140