黑马程序员ajax学习目标2

weixin_52616632

已于 2022-05-06 09:26:04 修改

阅读量1.4k

点赞数

分类专栏： ajax 文章标签： javascript 前端 ajax

于 2022-05-05 22:26:49 首次发布

本文链接：https://blog.csdn.net/weixin_52616632/article/details/124598454

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习目标2

1.form表单的基本使用

2.通过Ajax提交表单数据

3.案例 - 评论列表

4.模板引擎的基本概念

5.art-template模板引擎

6.模板引擎的实现原理

下面开始具体的知识

1.form表单的基本使用

1.1 什么是表单

在这里插入图片描述

1.2 表单的组成部分

在这里插入图片描述

1.3 标签的属性

在这里插入图片描述

1. action

action 属性用来规定当提交表单时，向何处发送表单数据。
action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。
当表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。

注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址

2. target

在这里插入图片描述

3. method

在这里插入图片描述

4. enctype

在这里插入图片描述

1.4 表单的同步提交及缺点

1. 什么是表单的同步提交

通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。

2. 表单同步提交的缺点

在这里插入图片描述

3. 如何解决表单同步提交的缺点

在这里插入图片描述

2. 通过Ajax提交表单数据

2.1 监听表单提交事件

在这里插入图片描述

2.2 阻止表单默认提交行为

在这里插入图片描述

2.3 快速获取表单中的数据

在这里插入图片描述

3. 案例 - 评论列表

3.1 渲染UI结构

在这里插入图片描述

3.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结构
    })
  }

3.3 发表评论

 $('#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('发表评论失败！')
      }
      // 刷新评论列表
      getCmtList()
      // 快速清空表单内容
      $('#formAddCmt')[0].reset()
    })
  })

3.4完整代码

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()
    })
  })
})

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="./lib/jquery.js"></script>
  <script src="./js/cmt.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" 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>

模板引擎

在这里插入图片描述

http://aui.github.io/art-template/zh-cn/docs/installation.html
在这里插入图片描述

完整代码

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="./assets/news.css" />
  <script src="./lib/jquery.js"></script>
  <script src="./lib/template-web.js"></script>
  <script src="./js/news.js"></script>
</head>

<body>

  <div id="news-list"></div>

  <!-- 定义模板 -->
  <script type="text/html" id="tpl-news">
      {{each data}}
      <div class="news-item">
        <img class="thumb" src="{{'http://www.liulongbin.top:3006' + $value.img}}" alt="" />
        <div class="right-box">
          <h1 class="title">{{$value.title}}</h1>
          <div class="tags">
            {{each $value.tags}}
            <span>{{$value}}</span>
            {{/each}}
          </div>
          <div class="footer">
            <div>
              <span>{{$value.source}}</span>&nbsp;&nbsp;
              <span>{{$value.time | dateFormat}}</span>
            </div>
            <span>评论数：{{$value.cmtcount}}</span>
          </div>
        </div>
      </div>
      {{/each}}
    </script>

</body>

</html>

CSS文件

.news-item {
  display: flex;
  border: 1px solid #eee;
  width: 700px;
  padding: 10px;
  margin-bottom: 5px;
}

.thumb {
  display: block;
  width: 230px;
  height: 140px;
  background-color: #ccc;
  margin-right: 10px;
}

.right-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  flex: 1;
}

.title {
  font-size: 20px;
  font-weight: normal;
}

.tags span {
  display: block;
  float: left;
  background-color: #F0F0F0;
  line-height: 20px;
  padding: 0 10px;
  border-radius: 10px;
  margin-right: 8px;
}

.footer {
  display: flex;
  justify-content: space-between;
}

JS文件

$(function () {
  // 给时间补零的函数
  function padZero(n) {
    if (n < 10) {
      return '0' + n
    } else {
      return n
    }
  }

  // 定义格式化时间的过滤器
  template.defaults.imports.dateFormat = function (dtStr) {
    var dt = new Date(dtStr)

    var y = dt.getFullYear()
    var m = padZero(dt.getMonth() + 1)
    var d = padZero(dt.getDate())

    var hh = padZero(dt.getHours())
    var mm = padZero(dt.getMinutes())
    var ss = padZero(dt.getSeconds())

    return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
  }

  // 获取新闻列表的函数
  function getNewsList() {
    $.get('http://www.liulongbin.top:3006/api/news', function (res) {
      if (res.status !== 200) {
        return alert('获取新闻列表数据失败！')
      }
      for (var i = 0; i < res.data.length; i++) {
        // 把每一项的 tags 属性，从字符串改造成字符串的数组
        res.data[i].tags = res.data[i].tags.split(',')
      }
      console.log(res)
      var htmlStr = template('tpl-news', res)
      $('#news-list').html(htmlStr)
    })
  }

  getNewsList()

})

weixin_52616632

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑马程序员ajax学习目标2

学习目标21.form表单的基本使用2.通过Ajax提交表单数据3.案例 - 评论列表4.模板引擎的基本概念5.art-template模板引擎6.模板引擎的实现原理下面开始具体的知识1.form表单的基本使用1.1 什么是表单1.2 表单的组成部分1.3 标签的属性1. actionaction 属性用来规定当提交表单时，向何处发送表单数据。action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。当表单在未指定 a
复制链接

扫一扫