HTML5+JS来实现网站数据异步评论功能

自己做网站开发过程中我们往往会需要网站的评论功能，首先网站如果拥有评论功能那么对于网站上一些高质量的文章资源来说就提高了用户的活跃度，其中一点就是在网文中提到的技术信息如果用户没有看懂如有疑问就可以进行发起评论并@站长或者文章作者，前提是网站的所有相应信息功能比较完善，在站长与用户之间的数据交互中也可以提高网站会员活跃度这个过程其实是相互的，这是对技术吧主来说的好处。还有一种好处就是对网站的SEO优化很重要，第一有助于搜索引擎的爬虫的引导，第二有助于站内信息的检索与内链的发展，第三用户可以通过这些评论找到自己想要的技术相关信息。

所从以上几点来看网站评论功能是很有必要的。接下来给大家介绍一下HTML5+JS来实现网站数据异步评论功能是如何实现的：

1.demo.html HTML 代码：

<!DOCTYPE>
 <html lang="zh-en">
 <head>
     <title>HTML5+JS来实现网站数据异步评论功能</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
     <link href="css/bootstrap.min.css" rel="stylesheet"/>
     <link href="css/demo.css" rel="stylesheet"/>
     <script src="js/jquery-1.11.0.min.js"></script>
     <script type="text/javascript" src="js/demo.js"></script>

 </head> 
 <body>
     <div class="container">
        <div class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-1 control-label">昵称：</label>
                <div class="col-sm-11">
                    <input type="email" class="form-control name"  placeholder="请输入昵称">
                </div> 
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">留言：</label>
                <div class="col-sm-11">
                    <textarea class="form-control message" rows="5" placeholder="请输入内容"></textarea>
                </div>
            </div>
            <div class="form-group  btn-box">
                <div class="col-sm-offset-1 col-sm-11">
                    <button type="submit" class="btn btn-success submit" >提交留言</button>
                    <button class="btn btn-primary viewMes">查看留言</button>
                    <button class="btn btn-danger deleteAll">删除留言</button>
                </div>
            </div>
        </div>

        <div class="panel panel-primary">
            <div class="panel-heading">留言列表</div>
                <div class="panel-body">
                    <ul class="list-group messageList">
                         
                    </ul>
                </div>
        </div>
    </script>
    </div>
</body>
</html>

代码解析：
因为页面是采用bootstrap开发的所以引用了bootstrap应用组件bootstrap.min.css和jquery-1.11.0.min.js。

2. demo.css CSS 代码：

*{
     margin: 0 auto;
     padding: 0;
     font-family: "Microsoft YaHei","sans-serif";
 }
 .container{
    margin-top:20px;
 }
.btn {
     padding: 5px 10px;
}
.del {
        cursor: pointer;
        background: #d9534f;
        border: none;
    }

3.demo.js 代码：

$(function(){
    //提交留言
    $(".btn-box .submit").click(function(){
        var _name = $(".name").val(),
            _msg = $(".message").val();
        if(_name=='' || _msg ==''){
            alert('请输入信息')
        }else {
            localStorage.setItem(_name,_msg);
            $(".name,.message").val('');
            listShow();
        }
    });
    //列表
    function listShow(){
        var str="";
        for(var i=0;i<localStorage.length;i++){
            var key= localStorage.key(i),
                value=localStorage.getItem(key);
            str+=`<li class="list-group-item" data-name=${key}>${key}
                        <span>说：</span>${value}
                        <button class="badge delbtn del">删除</button>
                    </li>`
        };
        $(".messageList").html(str);
    };
    //查看留言
    $(".btn-box .viewMes").click(function(){
        listShow();
    });
    //删除选中留言
    $(".messageList").on('click','.del',function(){
        var name=$(this).parent().attr("data-name");
       localStorage.removeItem(name);
       $(this).parent().remove();
    });
    //删除全部留言
    $(".btn-box .deleteAll").click(function(){
        localStorage.clear();
        $(".messageList").html('所有数据清除');
    });
})

代码解析：由于页面中引用了jquery所以对于网站javascript功能基本上都是基于jquery来编写的，包括评论提交时候的数据异步局部刷新，与删除。在数据提交的时候通过click点击事件后判断输入框是否为空，如果为空将会出现alert()提示框提示用户必须输入信息，这样就会在前端阻挡恶意提交行为，从而减少数据库被恶意注入的可能，如果是在程序开发过程中一般网站都是将评论用户与评论相关联，如果判断用户没有登陆将无法评论，这样就为网站安全提供了第二道安全防线。
这里的代码主要是评论功能的前端代码，以后我会根据这个前端代码在网站中添加评论功能，到时候会发布laravel5.7评论功能开发的全过程。

1.demo.html HTML 代码：

2. demo.css CSS 代码：

3.demo.js 代码：

友情链接