前后端交互：form表单与模板引擎
目录
form表单
基础知识
概念
<form> 标签用于为用户输入创建 HTML 表单，表单用于向服务器传输数据。
组成
- 表单标签
- 表单域：文本框、密码框、多行文本框、复选框、单选框、下拉选择框、文件上传框等
- 表单按钮 button
常用属性
action ：提交表单时，向何处发送表单
- 默认值就是当前网页的URL地址
- 提交后 表单会跳转到action属性设置的URL地址
target：规定在何处打开action URL
- 默认 _self 在相同和框架中打开action URL （在当前网页打开）
method：规定何种方式把表单提交到 action URL
- post：提交数据更加隐蔽，适合大量、复杂的或者文件上传；
- get：默认，可在在网址里面可以看到用户提交的信息不安全，适合少量的、简单的数据；
enctype：规定发送表单数据之前如何对数据进行编码
表单同步提交
概念
触发提交按钮 让页面发生跳转到 action URL的行为。表单具有默认的提交行为，默认是同步的。form标签内部的 action 和 method 属性就是用来编写同步的提交行为，同步表单提交，浏览器会直接将服务器响应的内容渲染到页面上。
缺点
- 页面发生跳转
- 页面之前的状态和数据会丢失
- 推荐：表单只负责采集数据，Ajax负责将数据提交到服务器
表单事件监听
submit监听方式
<form action="./index.html" method="post">
<input type="submit" value="">
</form>
<script>
$("form").submit(function (e) {
console.log('submit监听表单事件');
})
</script>on监听方式
<form action="./index.html" method="post">
<input type="submit" value="">
</form>
<script>
$("form").on('submit', function (e) {
console.log('on 监听表单事件');
})
</script>阻止表单默认行为
<form action="./index.html" method="post">
<input type="submit" value="">
</form>
<script>
$("form").on('submit', function (e) {
e.preventDefault();//阻止表单默认提交行为
})serialize 快速获取表单提交的数据
- 语法：$ ( selector ). serialize（）
- 返回值：form表单中所有带有name属性的表单元素的值，使用&符号衔接；
没有name属性的表单元素是无法获取的！
<form id="form1">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit"> 提交</button>
</form>
<script>
$('#form1').serialize();
//调用的结果:
// username = 用户名的值 & password = 密码的值
</script>
模板引擎
基础知识
概念
模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
优点
- 减少字符串的拼接
- 代码结构更清晰
- 易于维护阅读
art-template模板引擎
使用
- 导入art-template
- 定义数据
- 定义模板
- 调用template函数
- 渲染HTML结构
代码结构：
<body>
<!-- 1. 导入art-template -->
<script src="./template-web.js"></script>
<script src="./jQuery.min.js"></script>
<div id="container">我是容器 我用来装渲染好的结构</div>
<!-- 3.定义模板 -->
<script type="text/html" id="tpl">
<h1>{{name}}----{{age}}</h1>
</script>
<script>
//2.定义数据
var data = { name: 'zs', age: 20 };
//4.调用template函数
var htmlstr = template('tpl', data);
//5.渲染HTML结构
$("#container").html(htmlstr);
</script>
</body>效果展示：
标准语法
- 原文输出：{{@ value}} ：适用于带标签的内容 例如 <span></span>
- 条件输出：if ... else if... /if
<script type="text/html"> {{if value}}输出内容{{/if}} {{if value1}}输出内容1 {{else if value2}}输出内容2 {{/if}} </script> - 循环输出：each遍历数组
<script type="text/html"> {{each arr}} {{$index}} {{$value}} {{/each}} </script> - 过滤器：本质是function函数
<script type="text/html"> <div>注册时间：{{regTime | dataFormat}}</div> </script> <script> template.defaults.imports.dataFormat = function (dates) { var date = new Date(dates); var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); var h = date.getHours(); var mi = date.getMinutes(); var s = date.getSeconds(); m = m > 9 ? m : "0" + m; d = d > 9 ? d : "0" + d; h = h > 9 ? h : "0" + h; mi = mi > 9 ? mi : "0" + mi; s = s > 9 ? s : "0" + s; return `${y}-${m}-${d} ${h}:${mi}:${s}`; } </script> - 正则表达式 exec函数：检索字符串中的正则表达式的匹配
<script> //查询时候含有该字符串 有返回匹配值 没有返回null var str = 'hello'; var pattern1 = /o/; var pattern2 = /m/; // 输出的结果为一个数组["o", index: 4, input: "hel1o", groups: undefined] console.log(pattern1.exec(str)); //无法匹配返回 null console.log(pattern2.exec(str)); </script> <script> var str = '<div>我是{{name}}</div>'; var pattern = /{{([a-zA-Z]+)}}/; var patternResult = pattern.exec(str); console.log(patternResult); //得到name相关的分组信息 // ["{{name}}", "name", index: 7， input: "<div> 我是{{name}}</div>", groups: unde fined] </script>