评论列表案例，通过Ajax向服务器发送请求

周百万.

已于 2022-09-16 18:06:21 修改

阅读量369

点赞数 1

分类专栏： juery 文章标签： ajax javascript 前端评论列表案例 jquery

于 2022-09-16 15:22:48 首次发布

本文链接：https://blog.csdn.net/m0_45142186/article/details/126888479

版权

juery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现功能介绍：

1、通过bootstrap快速制作html面板

2、通过Ajax向服务器发送参数

3、将获取的参数通过循环的形式插入到数组中

4、将数组中的数据渲染到UI结构中

5、点击提交按钮时，再重新获取数据并渲染

6、点击回车，也能提交评论

展示：

1、引入文件

bootstrap文件

jquery文件

自己写的js文件

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="comment.js"></script>

2、快速实现html代码

提示：当你导入bootstrap之后下载插件 Bootstrap 3 Snippets

输入 bs3-panel 就会有提示，选择其中的primary就能快速生成框架

生成结构如下所示：

其他结构类似：

 <style>
        .input-group {
            margin-bottom: 20px;
        }
        
        #time {
            background-color: #f0ad4e;
        }
        
        #comment {
            background-color: #5bc04e;
        }
    </style>
</head>

<body style="padding:30px">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">发表评论</h3>
        </div>
        <form class="panel-body iptform">
            <div class="input-group">
                <div class="input-group-addon "> 评 论 人 ： </div>
                <input type="text" class="form-control iptpeople" id="exampleInputAmount" placeholder="请输入您的名字~" name="username">
            </div>
            <div class="input-group">
                <div class="input-group-addon">评论内容：</div>
                <textarea style="resize:none" name="content" id="input" class="form-control iptcomment" rows="3" required="required" placeholder="请输入您的评论~"></textarea>
            </div>
            <button type="submit" class="btn btn-primary iptbutton">发表评论</button>
        </form>

        <ul class="list-group" style="color: rgb(176, 26, 199)">
            <li class="list-group-item">
                <span class="badge" id="time">评论时间:</span>
                <span class="badge" id="comment">评论人：</span>
            </li>
        </ul>

    </div>

结果展示：

3、js代码

代码中的注释很多，我认为足够详细了，如果有问题，欢迎评论~

// 声明一个函数，通过get方法向服务器发送请求，并将赶回的数据渲染到页面上
function getComment() {
    $.ajax({
        method: 'get',
        url: 'http://www.liulongbin.top:3006/api/cmtlist',
        success: function(res) {
            var rows = [];
            $.each(res.data, function(i, item) {
                    // 没遍历一次往数组中push一次    往里面插入当前循环的数据
                    rows.push(' <li class="list-group-item">' + item.content + '<span class="badge" id="time">评论时间:' + item.time + '</span><span class="badge" id="comment">评论人：' + item.username + '</span></li>');
                })
                // 往ul中插入 rows数组，每个数据之间用空格隔开
            $(".list-group").empty().append(rows.join(''));
        }
    });
    $(".iptpeople").val("周百万");
}
getComment();
// 发表评论   给表单绑定submit事件  type="submit"才行
$(function() {
    $(".iptform").on('submit', function(e) {
        e.preventDefault();
        // 如果标签没有name属性就获取不到数据
        var data = $(this).serialize();
        // 将获取的数据通过post方法发送到服务器中
        $.post('http://www.liulongbin.top:3006/api/addcmt', data, function(res) {
            console.log(res);
            // 如果发送成功就重新获取数据渲染一下   如果失败就停止并提醒用户
            if (res.status !== 201) {
                return alert("发送失败！");
            }
            getComment();
            // 清空一下输入框   将jquery元素转化为原生的再使用reset方法
            $(".iptform")[0].reset();
            $(".iptpeople").val("周百万");
        });
    })




    // 当在评论内容框中点击回车，也执行发表评论
    $(".iptcomment").on('keypress', function(e) {
        if (e.keyCode == 13) {
            // 通过编码的方式，执行form的submit事件
            $(".iptform").submit();
        }
    })
})

服务器网址来自于黑马程序员，黑马很好欢迎去学习~

周百万.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
评论列表案例，通过Ajax向服务器发送请求

实现功能介绍：1、通过bootstrap快速制作html面板2、通过Ajax向服务器发送参数3、将获取的参数通过循环的形式插入到数组中4、将数组中的数据渲染到UI结构中5、点击提交按钮时，再重新获取数据并渲染6点击回车，也能提交评论
复制链接

扫一扫