form表单与模板引擎
一、form表单的基本使用
1.1 表单的概念
表单在网页中主要负责数据采集功能 通过 form 标签提交操作
1.2 表单的组成部分
表单标签 <form>表单域: 包含文本框 密码框 隐藏域 多行文本框 复选框 单选框 文件上传框表单按钮 <button type="submit">
1.3 form标签的属性
用来规定如何把采集到的数据发送到服务器action(向何处发送表单数据) 默认为当前页面的url,当提交表单后,会立即跳转到action属性指定的url地址target属性用来规定在何处打开action url
method 以何种方式提交表单数据(get post)get提交少量简单的数据(默认值)post提交大量 复杂的 或包含文件上传的数据
enctype 规定在发送表单数据之前如何对数据进行编码
文件上传时必须将 enctype 的值设置为 multipart/form-data
1.4 表单的同步提交和缺点
点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。缺点<form>表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。<form>表单同步提交后，页面之前的状态和数据会丢失
解决表单同步提交的缺点表单只负责采集数据 Ajax负责将数据提交到服务器
二、通过Ajax提交表单数据
2.1 监听表单提交事件
jQuery中有下边两种方式
$('#form1').submit(function(e) {
alert('监听到了表单的提交事件')
})
$('#form1').on('submit', function(e) {
alert('监听到了表单的提交事件')
})2.2 阻止表单默认提交行为
当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转
//第一种方式
$('#f1').submit(function (e) {
e.preventDefault();
alert('监听到了表单的提交1')
})
//第二种方式
// $('#f1').on('submit', function (e) {
// //阻止事件的默认行为
// e.preventDefault();
// alert('监听到了表单的提交2')
// })
2.3 快速获取表单中的数据
serialize()函数
一次性获取表单中的所有数据必须为每个表单元素添加name属性,且name不能重复
三、评论列表案例
引入的库
<link rel="stylesheet" href="./lib/bootstrap.css">
<script src="./lib/jquery.js"></script>
html部分
<!-- 评论面板 -->
<form class="panel panel-primary" id="forms">
<div class="panel-heading">
<h3 class="panel-title">发表评论</h3>
</div>
<div class="panel-body">
<div>评论人:</div>
<input type="text" name="username" class="form-control">
<div>评论内容:</div>
<textarea name="content" id="" class="form-control"></textarea>
<button type="submit" id="submit" class="btn-primary">发布评论</button>
</div>
</form>
<!-- 评论列表 -->
<ul class="list-group" id="ul">
</ul>
js部分
//获取评论列表
function getList() {
$.ajax({
type: 'get',
url: 'http://www.liulongbin.top:3006/api/cmtlist',
success: function (res) {
console.log('列表请求成功', res);
if (res.status !== 200) return alert('接口请求失败')
let lis = []
for (let i = 0; i < res.data.length; i++) {
lis.push(`
<li class="list-group-item">
<span class="badge" style="background-color: orange;">评论时间:${res.data[i].time}</span>
<span class="badge" style="background-color: blue">评论人:${res.data[i].username}</span>
${res.data[i].content}
</li>
`)
}
$('#ul').empty().append(lis)
}
})
}
getList()
//发表评论
$(function () {
$('#forms').submit(
function (e) {
//阻止表单默认提交行为
e.preventDefault()
let data = $(this).serialize()
console.log('data', data);
$.post('http://www.liulongbin.top:3006/api/addcmt', data, function (res) {
console.log('发布成功', res);
if (res.status !== 201) return alert('发布失败')
//请求列表接口
getList()
//清空表单内容
//jquery对象转换成原生dom对象
$('#forms')[0].reset()
})
}
)
})
。最终效果
四、模板引擎的基本概念
4.1 传统渲染UI结构的问题
通过字符串拼接,注意引号之间的嵌套,并且修改起来比较麻烦
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结构
4.2 模板引擎的概念
根据程序员指定的模板结构和数据,自动生成一个完整的HTML页面
4.3 模板引擎的优点
减少字符串的拼接操作使代码结构更清晰使代码更易于阅读和维护
五、art-template模板引擎
5.1 art-template简介
[官网地址](http://aui.github.io/art-template/zh-cn/)
5.2 安装
5.3 使用步骤
导入art-template
// 第一步 导入模板引擎
// 在window全局 就会多一个函数 叫做template('模板的id','渲染的数据')
<script src="./template-web.js"></script>
定义数据
// 第二步 定义渲染的数据
let data = {
name: '张三',
age: 20,
text: '<h2>原文输出</h2>',
flag: 1,
hobby: ['吃饭', '睡觉', '打豆豆'],
regTime: new Date()
}
定义模板
// 第三步 定义模板 (必须定义在script标签中去)
//默认的type(text/javascript) 属性 当作js去执行
// <script type="text/javascript"></script>
// {{}}为占位符
<script type="text/html" id="tpl-user">
<h1>{{name}}---- {{age}}</h1>
</script>
调用template函数
//第四步 调用template函数
let htmlstr = template('tpl-user', data)
console.log('htmlstr', htmlstr);
渲染HTML结构
//第五步 渲染html结构
let div = document.querySelector('#box')
console.log('div', div);
div.innerHTML = htmlstr;
5.4 标准语法
{{ }}内可进行变量输出 或 循环数组{{ }}语法中可进行变量的输出 对象属性的输出 三元表达式输出 逻辑输出 加减乘除表达式的输出
原文输出 {{@ value}}如果输出的value值中 包含html标签,则需要使用原文输出
条件输出{{}} 中使用if...else if...if
<div>{{if flag===0}}
flag的值0
{{else if flag===1}}
flag的值是1
{{/if}}
</div>
循环输出{{ }} 内，通过 each 语法循环数组
当前循环的索引使用 $index
。当前的循环项使用 $value
{{each hobby}}
<li>索引是:{{$index}},循环项是:{{$value}}</li>
{{/each}}
过滤器 {{value | filterName}}
过滤器语法类似管道操作符，它的上一个输出作为下一个输入。template.defaults.imports.filterName = function(value){/*return处理的结果*/}
六、模板引擎的实现原理
6.1 正则与字符串操作
exec()函数用于检索字符串中的正则表达式的匹配
如果字符串中有匹配的值 则返回该匹配值,否则返回null
var str = 'hello'
var pattern = /o/
// 输出的结果["o", index: 4, input: "hello", groups: undefined]
console.log(pattern.exec(str))
分组
正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容
字符串的replace函数
多次replace
使用while循环replace
replace替换为真值
6.2 实现简易的模板引擎
1.定义模板结构
<script type="text/html" id="box">
<div>姓名:{{name}}</div>
<div>年龄:{{age}}</div>
<div>性别:{{gender}}</div>
</script>
2.预调用模板引擎
//定义数据
let data = {
name: '张三',
age: 28,
gender: '男'
}
//调用模板引擎
let htmlStr = template('#box', data)
3.封装template函数
//封装template函数
function template(id, data) {
console.log('id', id, data);
let str = document.querySelector(id).innerHTML
console.log(str);
let partern = /{{\s*([a-zA-Z]+)\s*}}/
let Result = null
while (Result = partern.exec(str)) {
str = str.replace(Result[0], data[Result[1]])
}
return str
}
4.导入并使用自定义的模板引擎
<script src="./15-template.js"></script>
//渲染模板引擎
let div = document.querySelector('#div')
div.innerHTML = htmlStr
237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
