文章目录
Form表单和模板引擎
一、 Form表单
- 表单标签
- 表单域：包含了文本框，密码框，隐藏域，都行文本框，复选框，单选框，下拉选择框和文件上传框等等
- 表单按钮：通过设置
type属性为submit来触发form表单的提交
1. <form> 标签的属性
action 向哪发送表单数据
action属性用来规定当提交表单时，向何处发送表单数据action属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。- 当
<form>表单在未制定action属性值的清空下，action的默认值为当前页面的URL地址
注意: 当提交表单后，会立即跳转到 action 属性指定的 URL 地址
target 在哪打开
target属性用来规定 在何处打开action URL- 它的可选值有5个，默认情况下，
target的值是_self，表示在相同的框架中打开action URL
_blank在新窗口中打开
_self默认，在相同的框架中打开
method 什么方式提交
method属性用来规定 以何种方式 把表单数据提交到action URL- 它的可选值有两个，分别是
get和post
默认情况下，method的值为get， 表示通过URL地址的形式，把表单数据提交到action URL
注意：
- get 方式适合用来提交少量的，简单的数据
- post 方式适合用来提交大量的，复杂的，或包含文件上传的数据
enctype 编码
enctype属性用来规定在 发送表单数据之前如何对数据进行编码- 它的可选值有三个，默认情况下，
enctype的值为application/x-www-form-urlencoded，表示在发送前编码的所有字符
multipart/form-data不对字符编码，在使用包含文件上传控件的表单时，必须使用该值
text/plain空格转为“+”加号，但不对特殊字符编码（和少用）
2. 表单的同步提交及缺点
通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交
缺点
<form>表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差<form>表单同步提交后，页面之前的状态和数据会丢失
解决
- 表单只复杂采集数据，Ajax负责将数据提交到服务器
3. 通过 Ajax 提交表单数据
监听表单提交事件
$(function () {
// 第一种方式
$('#f1').submit(function () {
alert('监听到了表单的提交事件')
})
// 第二种方式
$('#f1').on('submit', function () {
alert('监听到了表单的提交事件2')
})
})
阻止表单默认提交行为
表单提交后必然会跳转到 action URL 地址，这是默认跳转行为
当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转
$(function () {
// 第一种方式
$('#f1').submit(function (e) {
e.preventDefault()
})
})
serialize() 函数快速获取表单数据
可以一次性获取表单的所有数据
$(selector).serialize()
注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性
二、模板引擎
模板引擎，它可以根据程序员指定的 模板结构 和 数据，自动生成一个完整的 HTML 页面
1. art-template 模板引擎
安装
基本使用
- 导入
art-template
在window全局，就多了一个函数，叫做template('模板id'，需要渲染的数据对象) - 定义数据
var data = { name: 'zs', age: 20 } - 定义模板
模板的 HTML 结构，必须定义到script标签中，注意：需要把 type 属性改成text/html - 调用
template函数
函数的返回值就是拼接好的模板字符串 - 渲染
HTML结构
<body>
<div></div>
<!-- 1. 导入模板引擎 -->
<script src="./template-web.js"></script>
<!-- 3. 定义模板 -->
<script type="text/html" id="yjy-user">
<h1>{{name}}---{{age}}</h1>
</script>
<script>
// 2. 定义数据
var data = {name: '远近渔',age: 18}
// 4. 调用 template 函数
var yjystr = template('yjy-user', data)
// 5. 渲染 HTML 结构
$('div').html(yjystr)
</script>
</body>
标准语法
art-template 提供了 {{}} 这种语法格式，在 {{}} 内可以进行 变量输出 或 循环数组 等操作，这种 {{}} 语法在 art-template 中被称为标准语法
-
输出
在{{}}语法中，可以进行 变量 的输出，对象属性 的输出，三元表达式 输出，逻辑或 输出，加减乘除等表达式 输出
{{value}}{{obj.key}}{{a ? b : c}}{{a || b}} -
原文输出
如果输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染 -
条件输出
如果要实现条件输出，则可以在{{}}中使用if...else if.../if的方式，进行按需输出
{{if who === 0}} who是0 {{else if who === 1}} who是1 {{/if}} -
循环输出
如果要实现循环输出，则可以在{{}}内，通过each语法循环数组，当前循环的索引使用$index进行访问，当前循环项使用$value进行访问
{{each who}} <li> {{$index}}, {{$value}} </li> {{/each}} -
过滤器
语法{{value | filteName}}就是把左边的参数传给右边的处理函数，然后返回新值
定义过滤器template.defaults.imports.who = function(value) {return处理的结果}
<body>
<div class="aaa"></div>
<!-- 1. 导入模板引擎 -->
<script src="./template-web.js"></script>
<!-- 3. 定义模板 -->
<script type="text/html" id="yjy-user">
<h1>{{regTime | dateFormat}}</h1>
</script>
<script>
template.defaults.imports.dateFormat = function (date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return `${y}年${m}月${d}日`
}
// 2. 定义数据
var data = {
regTime: new Date()
}
// 4. 调用 template 函数
var yjystr = template('yjy-user', data)
// 5. 渲染 HTML 结构
$('.aaa').html(yjystr)
</script>
</body>
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
