master

分支 (1)

管理

管理

master

text01
/
index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />

    <!-- <script src="./js/cmt.js"></script> -->
</head>

<body style="padding: 15px;">
    <h1>你好</h1>

    <!-- 评论面板 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">发表评论</h3>
        </div>
        <form class="panel-body" id="formAddCmt">
            <div>评论人：</div>
            <input type="text" class="form-control" name="username" autocomplete="off" />
            <div>评论内容：</div>
            <textarea class="form-control" name="content"></textarea>

            <button type="submit" class="btn btn-primary">发表评论</button>
        </form>
    </div>


    <!-- 评论列表 -->
    <ul class="list-group" id="cmt-list"></ul>
    <script src="./lib/jquery.js"></script>
    <script>
        function list1() {
            $.ajax({
                url: "http://www.liulongbin.top:3006/api/cmtlist",
                type: "get",
                success: function (res) {
                    //
                    if (res.status == 200) {
                        $("#cmt-list").html("");
                        $.each(res.data, function (index, item) {
                            let li = $(`<li class="list-group-item">
                          <span class="badge" style="background-color: #F0AD4E;">评论时间：${item.time}</span>
                          <span class="badge" style="background-color: #5BC0DE;">评论人：${item.username}</span>
                          ${item.content}
                        </li>`);

                            $("#cmt-list").append(li);
                        })
                    }
                }
            })
        }
        list1();


        // 新增
        $("form").on("submit", function (e) {
            e.preventDefault();

            // 1.收集数据
            let data = $(this).serialize();


            // 2提交数据
            $.ajax({
                url: "http://www.liulongbin.top:3006/api/addcmt",
                type: "POST",
                data: data,
                success: function (res) {
                    // console.log(res);
                    list();

                    // 表单元素置空：原生form节点.reset(); 重置；
                    $("form").get(0).reset();
                }
            })


        });
    </script>
</body>

</html>