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