0
点赞
收藏
分享

微信扫一扫

黑马程序员ajax学习目标2

鱼满舱 2022-05-05 阅读 74

学习目标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()
    })
  })

模板引擎

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
举报

相关推荐

0 条评论