Ajax入门——第二节（1）：运用form表单——渲染案例：评论列表

已于 2022-07-11 20:54:59 修改
阅读量486 收藏
点赞数
分类专栏： Ajax jQuery 文章标签： javascript ajax 前端
于 2022-07-11 13:08:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56897195/article/details/125706110
版权
jQuery 同时被 2 个专栏收录
12 篇文章 1 订阅
订阅专栏
Ajax
6 篇文章 1 订阅
订阅专栏

文章目录

相关知识：

Ajax入门——第一节：服务器的基本概念与初识Ajax

链接：https://blog.csdn.net/qq_56897195/article/details/125571482?spm=1001.2014.3001.5501

Ajax入门——第二节：form表单与模板引擎

链接：https://blog.csdn.net/qq_56897195/article/details/125582851?spm=1001.2014.3001.5501

1. 案例 - 评论列表

1.1 渲染UI结构

在这里插入图片描述

1.1.1 如何绘制ui面板

  1. 导入bootstrap,输入bs3-panel,挑选合适的样式
    在这里插入图片描述
    在这里插入图片描述
    代码如下：
<body style="padding: 15px;">
    <!-- 评论面板 -->
    
   
   <div class="panel panel-primary">
         <div class="panel-heading">
               <h3 class="panel-title">发表评论</h3>
         </div>
         <div class="panel-body">
               <div>评论人:</div>
               <input type="text" class="form-control" />
               <div>评论内容：</div>
               <textarea class="form-control" ></textarea>
         
               <button type="submit" class="btn btn-primary">发表评论</button>          
         </div>
   </div>
   <!-- 评论列表:输入 bs3-list-->
   
   <ul class="list-group">
       <li class="list-group-item">
           <span class="badge" style="background-color: aquamarine;">评论时间:</span>
           <span class="badge"  style="background-color: rosybrown;">评论人:</span>
           
           Item 1
       </li>
      
   </ul>
   
    
</body>

运行结果：
在这里插入图片描述

1.2 获取评论列表

 function getCmtList() {
    $.get('http://www.liulongbin.top:3006/api/cmtlist', function (res) {  
      if(res.status !== 200) {
        return alert('获取评论列表失败！')
      }
      var rows = []
      $.each(res.data, function (i, item) { // 循环拼接字符串
        rows.push('<li class="list-group-item">'+ item.content +'<span class="badge cmt-date">评论时间：'+ item.time +'</span><span class="badge cmt-person">评论人：'+ item.username +'</span></li>')
      })
      $('#cmt-list').empty().append(rows.join('')) // 渲染列表的UI结构
    })
  }

1.3 发表评论

 $('#formAddCmt').submit(function(e) {
    e.preventDefault() // 阻止表单的默认提交行为
    // 快速得到表单中的数据
    var data = $(this).serialize()
    //（请求的url地址，发送到服务器的数据，（调用回调函数）用res获取服务器响应回来的数据）
    $.post('http://www.liulongbin.top:3006/api/addcmt', data, function(res) {
    //然后对res进行判断
      if (res.status !== 201) {
        return alert('发表评论失败！')
      }
      // 刷新评论列表
      getCmtList()
      //获取评论列表成功之后， 快速清空表单内容
    //  [0]把jQuery对象转换为原生的dom对象，然后进行重置
      $('#formAddCmt')[0].reset()
    })
  })

1.4 总结

1.4.1 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="./lib/bootstrap.css">
    <script src="./练习.js"></script>
</head>
<body style="padding: 15px;">
    <!-- 评论面板 -->
    
   
   <div class="panel panel-primary">
         <div class="panel-heading">
               <h3 class="panel-title">发表评论</h3>
         </div>
         <div class="panel-body">
               <div>评论人:</div>
               <input type="text" class="form-control" />
               <div>评论内容：</div>
               <textarea class="form-control" ></textarea>
         
               <button type="submit" class="btn btn-primary">发表评论</button>          
         </div>
   </div>
   <!-- 评论列表:输入 bs3-list-->
   
   <ul class="list-group">
       <li class="list-group-item">
           <span class="badge" style="background-color: aquamarine;">评论时间:</span>
           <span class="badge"  style="background-color: rosybrown;">评论人:</span>
           
           Item 1
       </li>
      
   </ul>
   
    
</body>
</html>

1.4.2 js文档

function getCommentList() {
  $.ajax({
    method: 'GET',
    url: 'http://www.liulongbin.top:3006/api/cmtlist',
    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)
      })
      $('#cmt-list').empty().append(rows.join(''))
    }
  })
}

getCommentList()

$(function () {
  $('#formAddCmt').submit(function (e) {
    e.preventDefault()
    var data = $(this).serialize()
    $.post('http://www.liulongbin.top:3006/api/addcmt', data, function (res) {
      if (res.status !== 201) {
        return alert('发表评论失败！')
      }
      getCommentList()
      $('#formAddCmt')[0].reset()
    })
  })
})

1.4.3 运行结果：

在这里插入图片描述

2. 接口文档

2.1. 请求的根路径

http://www.liulongbin.top:3006

2.2. 评论列表

  • 接口URL： /api/cmtlist
  • 调用方式： GET
  • 参数格式：无
  • 响应格式：
数据名称数据类型说明
statusNumber200 成功；500 失败；
msgString对 status 字段的详细说明
dataArray评论列表
+idNumber评论Id
+usernameString评论人姓名
+contentString评论内容
+timeString评论时间
  • 返回示例：
{
    "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"
        }
    ]
}

2.3. 发表评论

  • 接口URL： /api/addcmt
  • 调用方式： POST
  • 参数格式：
参数名称参数类型是否必选参数说明
usernameString是评论人名称
contentString是评论内容
  • 响应格式：
数据名称数据类型说明
statusNumber201 发表评论成功；500 请填写完整的评论信息； 501 执行Sql失败；
msgString对 status 字段的详细说明
  • 返回示例：
{
    "status": 201,
    "msg": "发表评论成功"
}

2.4. 新闻列表

  • 接口URL： /api/news
  • 调用方式： GET
  • 参数格式：无
  • 响应格式：
数据名称数据类型说明
statusNumber200 获取新闻列表成功；500 获取新闻列表失败！
msgString对 status 字段的详细说明
dataArray新闻列表数组
+idNumber新闻Id
+titleString新闻标题
+sourceString新闻来源
+cmtcountNumber评论数量
+tagsString标签
+imgString图片地址
+timeString发表时间
  • 返回示例：
{
    "status": 200,
    "msg": "获取新闻列表成功",
    "data": [
        {
            "id": 1,
            "title": "5G商用在即，三大运营商营收持续下降",
            "source": "新京报经济新闻",
            "cmtcount": 58,
            "tags": "三大运营商,中国移动,5G商用",
            "img": "/images/0.webp",
            "time": "2019-10-28T03:50:28.000Z"
        }
    ]
}
不能瞌睡呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
JavaScript-项目实战（优学网-ajax请求数据渲染页面+登录注册表单正则）
qq_41008567的博客
07-03 1797
优学网项目简介 一、首页 (一) 、轮播图模块 1、图片轮播–定时器 2、鼠标滑入滑出事件 3、左右箭头事件 4、小圆点点击事件 (二) 、热门直播模块 (三) 、精品课程模块 二、登录注册页 (一) 、登录模块 (二) 、注册模块 三、视频播放页 (一) 、视频播放模块 1、视频设置 2、视频播放列表设置 (二) 、学员评价模块 1、评价信息数据处理 2、按钮事件设置
【学习笔记】ajax实现动态渲染表格数据（含分页和模糊查询）
kevin_g的博客
01-20 656
1.创建ajax数据响应通用类AjaxResponse package com.ajax.util; import java.util.List; public class AjaxResponse<T> { private int code = 0 ; private String msg = ""; private int count = 0; private List<T> data; public AjaxResponse() { // TODO Aut
Web前端速成(Html+Css+JavaScript+jQuery)-15.表单(Forms)
最新发布
05-14 127
介绍表单Forms 的属性和使用方法。
使用ajax读取接口，并渲染到表格中
youngirl2012的专栏
01-25 2298
html页面 <table> <tr> <th> Totalweekly</th> <th>Moderna</th> <th>pfizer</th> <th>janssen</th> <th>AstraZe
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2064
<!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>Do
Ajax第二天学习总结—— form表单与模板引擎(form表单的基本使用、通过Ajax提交表单数据、案例-评论列表、模板引擎、art-template模板引擎、案例-新闻列表、模板引擎的实现原理)
weixin_52819925的博客
08-22 380
(一)form表单的基本使用 1.表单 表单在网页中主要负责 数据采集功能。HTML中标签，就是用于采集用户输入的信息，并通过 标签的提交操作，把采集的信息提交到服务器端进行处理 2.表单的组成部分 表单标签 表单域：包含了文本框，密码框，隐藏域(type = 'hidden')，多行文本框，复选框，单选框，下拉选择框和文件上传框等等 表单按钮：通过设置type属性为submit来触发form表单的提交 3.<form>标签的属性 <form>标签用来采集数据，<for
Ajax-评论列表案例
qq_43781887的博客
09-13 550
功能二：添加评论，思路是要先阻止表单的默认行为，不然会把输入内容显示到URL中，然后进行$.post()请求提交表单内容，成功则刷新评论列表，同时需要清空评论人和评论内容框，这里清空的方法采用reset()方法，这样就不用一个一个去清空表单内容，操作更加简洁。业务部分都写在cmt.js文件中。
Rails-4-AJAX-Form：Rails 4 AJAX表单示例
02-01
创建一个AJAX表单的第一步是设置表单标签。例如，假设我们有一个`Post`模型，用于存储博客文章，我们可以创建一个如下的表单： ```html.erb <%= form_for @post, remote: true do |f| %> <%= f.text_field :title ...
jQuery使用动态渲染表单功能完成ajax文件下载
10-27
使用ajax实现文件下载，方便，快捷，时尚，多么有挑战的一个功能，首先获取url和data然后把参数组装成form的input再利用request发送请求，也就是动态渲染表单，提交表单后再删除，本例将实现文件下载功能，感兴趣的...
Django之Form表单验证及Ajax验证方式汇总
10-15
在Python的Web开发框架Django中，Form表单是处理用户输入数据的重要工具。它不仅提供了数据验证功能，还能帮助我们构建美观的HTML表单。本教程将详细讲解Django的Form表单验证以及如何结合Ajax实现无刷新验证。 ...
Bootstrap 表单验证formValidation 实现表单动态验证功能
08-30
Bootstrap 表单验证formValidation 实现表单动态验证功能 Bootstrap 表单验证formValidation 实现表单动态验证功能是指利用 Bootstrap 框架和 formValidation 插件实现对表单的动态验证功能。该功能可以动态添加或...
Django学习笔记六：form表单实现评论（检验数据合法性)
xunalove的博客
08-02 1313
最近一直想给博客更新一个模板，找了好多的静态模板，不知道怎么用，这几天特意花点时间在这个事情上，主要是静态文件的存放路径，好复杂呀，花了近两天时间才豁然开朗，特找了一个模板放在博客上，同时完善了博客的评论功能。 静态模板来自点击打开链接（花了我5个大洋换了500个积分，然而就用了20个积分生气） 先上图看看效果：（是不是比之前的好看多了） 替换模板是个繁琐的项目。在这里就不多记录啦。 主要记
JavaScript的表单校验、ajax提交和数据渲染的流程
C.
07-19 1462
 下面简单封装了一个类似jquery的ajax工具 (function(global){ let kevin = {}; kevin.ajax = function(type, url, data, headers, callback){ let xhr = new XMLHttpRequest(); xhr.onreadystatechange...
42 Ajax form表单属性 ajax提交表单 serialize() 评论列表案例 art-templat模板引擎原理 新闻列表案例
Write less，do more
09-13 501
Form表单的基本使用 什么是表单 表单在网页中主要负责 数据采集功能。 <form> 标签的属性(⭐⭐⭐) action action 属性用来规定当提交表单时，向何处发送表单数据。 action 属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。 当 <form>表单在未制定 action 属性值的清空下，action的默认值为当前页面的 URL 地址 注意: 当提交表单后，会立即跳转到 action 属性指定的 URL 地址 target t
props中属性的命名规则
ab_er的博客
08-31 832
props中属性的命名规则：在props中使用驼峰命名，在模板中建议使用短横线形式
Vue实战项目案例的注意事项
qq_46634307的博客
04-30 268
头条案例 我们新建项目的时候，多加上一个选项 router ，然后构建完成之后，src 里面会有两个文件夹 components 和 views 两个文件夹 如果某个组件是通过路由来实现动态展示和切换的组件放在 views 文件夹里面；如果不是通过路由展示和切换，而且是可复用的组件的话，就放在 components 文件夹里面 Vant 组件 安装 通过 npm 安装 （我们这里选用的方式） 在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装： # Vue 3 项目，安装最新版 V
将时间格式化为（2019-10-28 11:50:28）
qq_41670147的博客
12-01 339
function formatData(timeValue){ var setTimeVal = new Date(timeValue); var year = setTimeVal.getFullYear() //年 var mouth = setTimeVal.getMonth() + 1 //月 var data = setTimeVal.getDate() //日 .
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不能瞌睡呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值