ajax案例:评论列表

已于 2022-05-18 16:13:23 修改
阅读量214 收藏 2
点赞数 1
分类专栏： ajax 文章标签： ajax
于 2022-03-22 18:57:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63400611/article/details/123668417
版权

分析

通过接口文档提供的接口信息,以及利用bootstrap.css库,jQuery.js库,实现页面的样式,通过js将从接口获取到的数据渲染到页面中

 

代码及接口文档

引入bootstrap,以及jQuery才能正常运行

其中bootstrap部分使用了:

1.bs3-panel:primary作为表单区域的样式,后续添加div,input class="form-control"以及button class"btn btn-peimary"

2.bs3-list-group:badges作为用来渲染加载评论列表的样式,将li中的span复制一份作为右边浮动的元素

接口文档

### 请求的根路径

> http://www.liulongbin.top:3006





### 评论列表

+ 接口URL：  /api/cmtlist
+ 调用方式： GET
+ 参数格式：无
+ 响应格式：

| 数据名称  | 数据类型 | 说明                     |
| --------- | -------- | ------------------------ |
| status    | Number   | 200 成功；500 失败；     |
| msg       | String   | 对 status 字段的详细说明 |
| data      | Array    | 评论列表                 |
| +id       | Number   | 评论Id                   |
| +username | String   | 评论人姓名               |
| +content  | String   | 评论内容                 |
| +time     | String   | 评论时间                 |

+ 返回示例：

```json
{
    "status": 200,
    "msg": "获取评论列表成功",
    "data": [
        {
            "id": 2,
            "username": "李四",
            "content": "宝塔镇河妖",
            "time": "2019-10-25 16:18:52"
        },
        {
            "id": 1,
            "username": "张三",
            "content": "天王盖地虎",
            "time": "2019-10-25 16:12:57"
        }
    ]
}
```





### 发表评论

+ 接口URL：  /api/addcmt
+ 调用方式： POST
+ 参数格式：

| 参数名称 | 参数类型 | 是否必选 | 参数说明   |
| -------- | -------- | -------- | ---------- |
| username | String   | 是       | 评论人名称 |
| content  | String   | 是       | 评论内容   |

+ 响应格式：

| 数据名称 | 数据类型 | 说明                                                         |
| -------- | -------- | ------------------------------------------------------------ |
| status   | Number   | 201 发表评论成功；500 请填写完整的评论信息； 501 执行Sql失败； |
| msg      | String   | 对 status 字段的详细说明                                     |

+ 返回示例：

```json
{
    "status": 201,
    "msg": "发表评论成功"
}
```





### 新闻列表

+ 接口URL：  /api/news
+ 调用方式： GET
+ 参数格式：无
+ 响应格式：

| 数据名称  | 数据类型 | 说明                                         |
| --------- | -------- | -------------------------------------------- |
| status    | Number   | 200 获取新闻列表成功；500 获取新闻列表失败！ |
| msg       | String   | 对 status 字段的详细说明                     |
| data      | Array    | 新闻列表数组                                 |
| +id       | Number   | 新闻Id                                       |
| +title    | String   | 新闻标题                                     |
| +source   | String   | 新闻来源                                     |
| +cmtcount | Number   | 评论数量                                     |
| +tags     | String   | 标签                                         |
| +img      | String   | 图片地址                                     |
| +time     | String   | 发表时间                                     |

+ 返回示例：

```json
{
    "status": 200,
    "msg": "获取新闻列表成功",
    "data": [
        {
            "id": 1,
            "title": "5G商用在即，三大运营商营收持续下降",
            "source": "新京报经济新闻",
            "cmtcount": 58,
            "tags": "三大运营商,中国移动,5G商用",
            "img": "/images/0.webp",
            "time": "2019-10-28T03:50:28.000Z"
        }
    ]
}
```

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<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="../../../js/bootstrap/css/bootstrap.css" />
    <script src="../../../js/jQuery.js"></script>
    <script src="./js/index.js"></script>
</head>

<body style="padding: 15px;">
    <!--评论面板-->


    <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" style="resize: none;" name="content"></textarea>
            <button type="submit" class="btn btn-primary">发表评论</button>
        </form>
    </div>


    <!--评论列表-->


    <ul class="list-group" id="cmt-list">
        <li class="list-group-item">
            <span class="badge" style="background-color: #F0AD4E;">评论时间: </span>
            <span class="badge" style="background-color: #5BC0DE;">评论人: </span> Item 1
        </li>
    </ul>

</body>

</html>

index.js

$(function() {
    //定义获取接口评论列表方法 通过ajax的get方法获取评论列表
    function getCommentList() {
        $.ajax({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/cmtlist',
            data: {}, //因为本次GET请求不需要传输data信息 所以可以为空或者删除data参数
            success: function(res) { //请求后的回调函数
                if (res.status !== 200) return alert('获取评论列表失败');
                //定义一个空数组来存放获取的评论数据
                var rows = [];
                //遍历获取的评论数据 并渲染加载评论列表到页面中
                $.each(res.data, function(i, item) {
                        //每循环一次 创建一个字符串 结构
                        var str = '<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>'
                        rows.push(str);
                    })
                    //直接插入的rows为数组类型 使用join()方法将其变为字符串类型
                $('#cmt-list').empty().append(rows.join(''));
            }
        })
    }

    //阻止提交表单默认行为并且获取formAddCmt表单的数据
    $('#formAddCmt').on('submit', function(e) {
        //阻止提交表单默认行为
        e.preventDefault();
        //获取formAddCmt表单中的数据
        var data = $(this).serialize();
        // console.log(data);
        // 通过ajax的post方法提交表单数据 实现发表评论
        $.post('http://www.liulongbin.top:3006/api/addcmt', data, function(res) {
            if (res.status !== 201) {
                alert('发表评论失败');
            }
            console.log(data);
            //再次调用获取评论列表方法 发布评论后重新渲染列表
            getCommentList();
            //先将jQuery对象$('#formAddCmt')转换为DOM对象 再利用reset()方法在发表评论后重置表单
            $('#formAddCmt')[0].reset();
        })
    })

    getCommentList();
})

 

 

m0_63400611
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX案例——评论列表
lijin0726的博客
09-17 305
js部分 大致思路： Part-1：通过创建函数使用AJAX向服务器请求数据并通过遍历的方法将获取的数据即服务器端已有的评论其渲染至页面 Part-2: 通过Ajax将自己的评论发送至服务器端并再次调用Part-1中的函数将评论列表刷新一遍就可以看到自己的评论了
Ajax-评论列表案例
qq_43781887的博客
09-13 547
功能二：添加评论，思路是要先阻止表单的默认行为，不然会把输入内容显示到URL中，然后进行$.post()请求提交表单内容，成功则刷新评论列表，同时需要清空评论人和评论内容框，这里清空的方法采用reset()方法，这样就不用一个一个去清空表单内容，操作更加简洁。业务部分都写在cmt.js文件中。
ajax评论案例
qq_45387575的博客
04-07 345
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-wid...
利用jQuery中的Ajax完成评论列表案例
小白小白从不日别的博客
11-23 604
本案例主要利用 boostrap 来快速构建页面 UI 步骤： 渲染评论列表UI index.css， body { padding: 15px; } .list-group-item span:first-child { background-color: #5bc0de; } .list-group-item span:last-child { background-color: #f0ad4e; } <link rel="stylesheet"
ajax嵌套动态拼接页面（以展示评论列表几默认点赞现实为例）
qq_15783243的博客
05-23 557
ajax嵌套实现默认点赞显示： function postList() { var html = ""; $.ajax({ //async: false, type: "POST", dataType: 'json', url: "comment/getPost",//content:textareaC
Ajax案例集下载：新增分页查询案例（包括《Ajax开发精要》中的两个综合案例） 下载
12-10
一个是支持增、删、改、模糊搜索的简单留言簿，另外一个是模拟MSN Space所提供的日志评论、固定链接、引用通告以及自定义列表管理的功能。今天新增一个分页查询的案例。同样的，与之前的两个案例类似，分页查询的...
Ajax经典案例开发大全
05-14
6. 图片预览：在图片列表中，用户鼠标悬停在图片缩略图上时，通过Ajax加载大图并进行预览，减少了页面跳转的时间。 7. 文件上传进度显示：使用Ajax上传文件时，可以实时显示上传进度，让用户了解操作状态，提升用户...
Ajax 实用案例大全
09-14
9. **评论系统**：在博客或新闻网站中，Ajax常用于实现评论的添加、删除和回复，无需刷新整个页面，只更新评论区。 10. **个性化推荐**：基于用户行为的个性化推荐，如音乐推荐、电影推荐，Ajax可以实现推荐内容的...
Ajax 实用案例大全（图书馆光盘资料）
08-29
### 三、Ajax案例分析 书中的实例可能包括： 1. **动态搜索**：在用户输入关键字时，实时从服务器获取匹配结果，展示在下拉框中。 2. **无刷新分页**：点击分页链接时，仅加载新的内容块，保持当前浏览位置。 3....
评论列表css样式,CSS列表样式属性
weixin_39613208的博客
08-04 412
列表样式类型属性(list-style-type)这个属性用来设定列表项标记(list-item marker)的类型。有以下值：disc (缺省值，黑圆点circle (空心圆点)square (小黑方块)decimal (数字排序)lower-roman (小写罗马字排序)lower-alpha (小写字母排序)none (无列表项标记以disc,circle,square,none作为列表项...
bootstrap评论列表模板
08-27
几个完全基于bootstrap前段框架的评论列表模板，兼容各种浏览器。
40、评论表单的样式和评论列表的显示1
08-04
回到代码，add()法的第三个参数就可以设置这些选项，先我们让表单的标签和本框显示到，需要对整进显示设置，我们使row_attr设置，在设置中我们添加个样式类c
评论列表css样式,评论框CSS样式修改
weixin_35132871的博客
08-04 702
根据V说的简单改了一个，有一个bug，就是鼠标悬停下摇晃后头像会消失，不会编程我就只能改成这样了[挖鼻屎]#pinglun-container img.avatar-36,#pinglun-container img.avatar-36:hover{-webkit-animation-fill-mode: both;-moz-animation-fill-mode: both;-ms-animat...
评论列表显示及排序，个人中心显示
weixin_34192732的博客
12-12 145
1.显示所有评论{% for foo in ques.comments %} 1 <ul class="list-group" style="margin-top: 30px;"> 2 <h1>全部评论</h1> 3 {% for com in comment ...
ajax读取评论数据,评论提交使用ajax提交实现
weixin_39862697的博客
08-05 267
评论部分不刷新提交，用户体验感好。这里便使用ajax实现。使用提交时，状态栏显示success，error考虑到使用的是jQuery的ajax，首先便要导入jQuery库。本文使用的是jquery-1.12.4.min.js。blog/base.html{% block title %}{% endblock %}** **{% block header_extends %}{% endbloc...
类似QQ空间中回复列表的样式 "小明 回复 小红"
li352558693的专栏
04-25 1045
类似QQ空间中回复列表的样式 "小明 回复 小红" ，单独textview控件完成。 public class CommentTextView extends TextView { public CommentTextView(Context context) { super(context); } public CommentTextView(Context context, A
ajax案例：评论
Yous的博客
08-01 113
代码】ajax案例评论。使用jQuery
快速入门了解Ajax
最新发布
音符犹如代码的博客
07-25 863
上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios。意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML。介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具。下边是两个来自官网的post的请求和get请求的代码。
Ajax案例：异步加载商品分类信息
06-06
好的，下面是一个简单的 Ajax 异步加载商品分类信息的案例： 1. HTML 页面中设置一个 select 元素，用于显示商品分类信息： ```html 请选择商品分类 ``` 2. 编写 JavaScript 代码，通过 Ajax 获取商品分类信息...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值