Bootstrap驱动的前端评论表单实战与Ajax数据提交-CSDN博客

本文链接：https://blog.csdn.net/qq_45387575/article/details/124019974

bootstrap、form表单得使用

把发表评论得区域变成一个表单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="04.js"></script>
</head>

<body style="padding:15px">
    <!-- 评论面板 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">发表评论</h3>
        </div>
        <!-- 用表单来采集数据name不能乱写，采集到得数据要提交到api中 -->
        <form class="panel-body" id="formAddCmt">
            <div>评论人：</div>
            <input type="text" placeholder="请输入评论人" class="form-control" name="username">
            <div>评论内容：</div>
            <textarea class="form-control" name="content"></textarea>
            <button type="submit" class="btn btn-primary">发表评论</button>
        </form>
    </div>
    <!-- 评论列表 -->
    <ul class="list-group">
        <li class="list-group-item">
            <span class="badge" style="background-color: rgb(229, 167, 11);">评论时间：</span><span class="badge" style="background-color: rgb(13, 217, 244);">评论人：</span> 24*7 支持
        </li>
    </ul>

</body>

</html>

window.onload = function() {
    $(function() {
        //获取评论列表得数据，需要用到ajax来请求api接口
        function getCommentList() {
            $.ajax({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/cmtlist',
                data: {},
                success: function(res) {
                    if (res.status !== 200) return alert('获取评论列表失败')
                    console.log(res);
                    console.log('获取成功');
                    //获取成功之后，需要把获取出来得数据渲染到页面中得评论列表中，因为有很多数据
                    var rows = []
                    $.each(res.data, function(i, item) { //循环拼接字符,i是属性名，item就是属性值,每循环一次，都会执行function回调函数一次，注意在字符串中是不允许回调换行得。每循环一次生成一次li得字符串，在添加到ul中。
                        rows.push('<li class="list-group-item"><span class="badge" style="background-color: rgb(229, 167, 11);">评论时间：' + item.time + '</span><span class="badge" style="background-color: rgb(13, 217, 244);">评论人：' + item.username + '</span> ' + item.content + '</li>')
                    })
                    $('.list-group').empty().append(rows.join(''))
                }
            })
        }
        getCommentList()
            //添加评论，监听表单
        $('#formAddCmt').submit(function(e) {
            e.preventDefault()
                //阻止完毕后要快速获取表单元素
            var data = $('#formAddCmt').serialize()
            console.log(data);
            //发起ajax，post请求提交数据
            $.ajax({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/addcmt',
                data: data, //好像会对data进行自动分隔出属性名和属性值。
                //需要请求得数据，就是上面从表单中获取过来得数据
                success: function(res) {
                    console.log(res);
                    if (res.status != 201) {
                        alert('发表失败')
                    } else { //说明发表评论成功
                        //刷新评论列表
                        getCommentList()
                            //清空内容 $('#formAddCmt')[0]将jquery对象转换成原生dom对象
                            // $('.form-control').val('')(如果一个表单里面有很多内容得时候）太麻烦了,直接获取form表单调用reset清空
                        $('#formAddCmt')[0].reset()
                    }
                }
            })
        })
    })
}