简单的ajax评论

最新推荐文章于 2021-08-06 19:56:07 发布

JeLewine

最新推荐文章于 2021-08-06 19:56:07 发布

阅读量2.3k

点赞数

分类专栏： Web 文章标签： ajax

本文链接：https://blog.csdn.net/LiberJe/article/details/50387705

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天写了一个简单的ajax评论，记录步骤如下：

首先把整体主页面写出来

<html>
<head>
   <meta charset="utf8"> 
   <title></title>
   <style>
*{
    margin: 0;
    border:0;
}
a{
    text-decoration: none;
    outline:none;
}
/*留言板*/
.message{
    width: 100%;
    height: 460px;
    background-color: #444444;
}
.block-ph{
    width: 100%;
    height: 20px;
}
.block{
    width: 600px;
    height: 400px;
    margin: 0px auto;
    background-color: #C0B8B8;
    border:1px #C0B8B8 solid;
    border-radius: 3px;
}
.block-title{
    width: 560px;
    height:80px;
    margin: 0 auto;
    font-size: 40px;
    line-height: 80px;
}
.block-intro{
    width: 560px;
    height: 29px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 30px;
    border-bottom: 1px solid #FFFFCC;
}
.block-con{
    width: 560px;
    height: 290px;
    margin: 0 auto;
}
.con-title{
    width: 560px;
    height:30px;
    margin: 0 auto;
    line-height: 30px;
}
.con-title p{
    width: 280px;
    height: 30px;
    float: left;
}
.con-title p:last-child{
    text-align: right;
}
.con-input{
    width: 560px;
    height: 260px;
}
#input-mess{
    resize: none;
}
#sub{
    width: 100px;
    height: 45px;
    margin-top:10px; 
    background-color: #CC3333;
    border-radius: 2px;
    float: right;
    outline: none;
}
.comment-box{
    width: 600px;
    height: 0;
    margin: 20px auto;
}


/*页脚*/
.foot{
    width: 100%;
    height:80px;
    background-color: #282828;
}
   </style>
</head>

<body>

<!--留言板-->
<div class="message">
    <div class="block-ph"></div>
    <div class="block">
        <div class="block-title">向博主提问</div>
        <div class="block-intro">欢迎提问，对于好的问答内容，我会作为日志公开发布。</div>
        <div class="block-con">
            <div class="con-title">
                <p>问题</p>
                <p>你还可以输入<span id="surplus">500</span字</p>
            </div>
            <div class="con-input">
                <form>
                    <textarea name="message" id="input-mess" cols="66" rows="9"></textarea><br />
                    <input type="button" id="sub" value="提交">
                </form>
            </div>
        </div>
    </div>
    <div class="comment-box"></div>
</div>

<!--页脚-->
<div class="foot"></div>

<script src="../jquery-1.11.2.min.js"></script>
<script src="message.js"></script> 
</body>
</html>

接着就是js部分
jquery下的ajax十分简单,遵循以下语法即可

$.ajax({
url:url,//请求地址
data:data,//请求数据
async:true,//是否异步，默认情况下是true，异步执行
success:function(res){}//回调函数，课传入res参数调取响应值
})

下面是js代码

$(document).ready(function(){
    document.getElementById('input-mess').oninput=function(){
        calculate();
    }
    $('#sub').click(function(){
        getComment();
    })


    function calculate(){
        var num=$('#input-mess').val().length;
        var purplus=500-num;
        $('#surplus').text(purplus);
    }

    function getComment(){
        var data=$('#input-mess');
        $.ajax({
            url:"comment.php",
            data:data,
            success:function(res){
                var newElement="<div></div>";
                $('.comment-box').append(newElement);
                $('.comment-box div').last().css({
                    "display":"none",
                    "width":"600px",
                    "background-color":"white",
                    "margin-top":"20px",
                    "border-radius":"3px"
                }).addClass('comment');
                //插入评论内容
                var childElement="<p>"+res+"</P>";              
                $('.comment').last().append(childElement);
                $('.comment p').css({
                    "padding":"20px",
                    "line-height":"25px"
                });
                $('.comment:last').fadeIn(1500);   
                // 改变message主体的高度
                var messageHeight=$('.message').height();
                var commentHeight=$('.comment').last().height();
                $('.message').css('height',messageHeight+commentHeight+20+'px');                          
            }
        })
    }

})