附录3-评论列表案例

最新推荐文章于 2024-05-21 23:21:19 发布

Suyuoa

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量238

点赞数

分类专栏： Ajax笔记文章标签：前端 css html

本文链接：https://blog.csdn.net/potato123232/article/details/127754388

版权

Ajax笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

打开页面后可以获取到历史的评论

可以发表评论

时间使用后端的时间

如果评论或评论内容中有空的地方会有提示

1 后端

1.1 添加评论

1.2 查看所有评论

2 前端

html

<!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="initialization.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <form>
        <div class="header">发表评论</div>
        <div class="content">
            <div>评论人</div>
            <input type="text" name="username" placeholder="请输入评论人" maxlength="20">
            <div>评论内容</div>
            <textarea name="content" placeholder="请输入评论内容(最多120字)" maxlength="120"></textarea>
            <button type="submit">发表评论</button>
        </div>
    </form>
    <ul>
        <!-- <li>
            <span class="remark_content">欢迎大家</span>
            <div class="remark_tail">
                <span class="remark_user">评论人: 小红</span>
                <span class="remark_time">评论时间： 2022-11-04 16:37</span>
            </div>
        </li>

        <li>
            <span class="remark_content">欢迎大家</span>
            <div class="remark_tail">
                <span class="remark_user">评论人: 小红</span>
                <span class="remark_time">评论时间： 2022-11-04 16:37</span>
            </div>
        </li>

        <li>
            <span class="remark_content">欢迎大家</span>
            <div class="remark_tail">
                <span class="remark_user">评论人: 小红</span>
                <span class="remark_time">评论时间： 2022-11-04 16:37</span>
            </div>
        </li> -->
    </ul>
</body>
<script src="../jquery-3.6.1.min.js"></script>
<script src="index.js"></script>
</html>

css

form {
    width:95%;
    margin:20px auto;
    border:3px solid rgb(51,121,183);
    border-radius: 5px;
    .header {
        width:calc(100%+2px);
        height:30px;
        margin:-1px -1px -1px -1px;
        color:white;
        font-size:16px;
        line-height:30px;
        text-indent: 2%;
        background-color:rgb(51,121,183);
    }
    .content {
        width:95%;
        padding:20px 0;
        margin:0 auto;
        div {
            width:100%;
            text-indent: 1%;
            color:black;
            font-weight: bold;
        }
        input {
            width:100%;
            padding:5px;
            margin:5px 0;
            text-indent: 1%;
        }
        textarea {
            width:100%;
            height:100px;
            padding:10px;
            margin:5px 0;
            resize:none;
        }
        button {
            display: block;
            width:80px;
            height:30px;
            border:1px solid transparent;
            border-radius: 5px;
            color:white;
            background-color: rgb(51,121,183);
        }
    }
}

ul {
    width:95%;
    margin:20px auto;
    border:3px solid gray;
    border-radius: 5px;
    li {
        height:30px;
        line-height: 30px;
        border-bottom: 3px solid gray;
        .remark_content {
            margin-left:15px;
        }
        .remark_tail {
            float:right;
            margin-right:15px;
            .remark_user {
                padding:2px 10px;
                border-radius: 15px;
                color:white;
                background-color: rgb(93,190,220);
            }
            .remark_time {
                padding:2px 10px;
                margin-left:5px;
                border-radius: 15px;
                color:white;
                background-color: rgb(240,172,80);
            }
        }
    }
    li:last-child {
        border-bottom: 3px solid transparent;
    }
}

function load_remark() {
    $.ajax({
        type:'GET',
        url:'http://127.0.0.1:8000/content/get_all_content',
        success:function(result) {
            $('ul').empty()
            result = JSON.parse(result)
            content = eval(result['content'])
            for (i in content) {
                username = content[i].username
                remark_content = content[i].content
                remark_time = content[i].remark_time
                $('ul').prepend('<li><span class="remark_content">'+ remark_content +'</span><div class="remark_tail"><span class="remark_user">评论人: '+ username +'</span><span class="remark_time">评论时间： '+ remark_time +'</span></div></li>')
            }
        }
    })
}

load_remark()

$('form').on('submit',function(e) {
    e.preventDefault()

    submit_content = $(this).serializeArray()
    username = submit_content[0].value
    content = submit_content[1].value

    if (username && content) {
        $.ajax({
            type:'POST',
            url:'http://127.0.0.1:8000/content/add_remark',
            data:$(this).serializeArray(),
            success:function() {
                load_remark()
                $('form')[0].reset()
            }
        })
    }
    else {
        alert('请填写完整的内容')
    }
})