目录
标签的属性前言
目标
-
能够说出form表单的常用属性
-
能够知道如何阻止表单的默认提交行为
-
能够知道如何使用
jQuery
快速获取表单数据 -
能够知道如何安装和使用模板引擎
-
能够知道模板引擎的实现原理
Form表单的基本使用
什么是表单
表单在网页中主要负责 数据采集功能。HTML中<form>
标签,就是用于采集用户输入的信息,并通过 <form>
标签的提交操作,把采集的信息提交到服务器端进行处理
表单的组成部分
-
表单标签
-
表单域:包含了文本框,密码框,隐藏域,都行文本框,复选框,单选框,下拉选择框和文件上传框等等
-
表单按钮:通过设置
type
属性为submit
来触发form
表单的提交
<form>
标签的属性
action
action
属性用来规定当提交表单时,向何处发送表单数据。
action
属性的值应该是后端提供的一个URL地址,这个URL地址专门负责接收表单提交过来的数据。
当 <form>
表单在未制定 action
属性值的清空下,action
的默认值为当前页面的 URL
地址
注意: 当提交表单后,会立即跳转到 action
属性指定的 URL
地址
target
target
属性用来规定 在何处打开 action URL
它的可选值有5个,默认情况下,target的值是 _self,表示在相同的框架中打开 action URL
method
method
属性用来规定 以何种方式 把表单数据提交到 action URL
它的可选值有两个,分别是 get
和 post
默认情况下,method
的值为 get
, 表示通过URL
地址的形式,把表单数据提交到 action URL
注意:
get 方式适合用来提交少量的,简单的,本身不重要的数据
post 方式适合用来提交大量的,复杂的,或包含文件上传的数据
在工作中,post请求是用的最多的
enctype
enctype
属性用来规定在 发送表单数据之前如何对数据进行编码
它的可选值有三个,默认情况下,enctype
的值为 application/x-www-form-urlencoded
,表示在发送前编码的所有字符
表单的同步提交及缺点
什么是表单的同步提交
通过点击 submit 按钮,触发表单提交的操作,从而使页面跳转到 action URL
的行为,叫做表单的同步提交
表单同步提交的缺点
-
<form>
表单同步提交后,整个页面会发生跳转,跳转到 action URL 所指向的地址,用户体验很差 -
<form>
表单同步提交后,页面之前的状态和数据会丢失
如何解决呢?
表单只复杂采集数据,Ajax负责将数据提交到服务器
通过Ajax提交表单数据
监听表单提交事件
在 jQuery
中,可以使用如下两种方式,监听到表单的提交事件
阻止表单默认提交行为
当监听到表单的提交事件以后,可以调用事件对象的 event.preventDefault()
函数,来阻止表单的提交和页面的跳转
如何快速获取表单数据
serialize()
函数
为了简化表单中数据的获取操作,jQuery
提供了 serialize()
函数,语法格式如下:
好处:可以一次性获取表单的数据
示例代码:
注意:在使用 serialize() 函数快速获取表单数据时,必须为每个表单元素添加 name 属性
模板引擎
相关概念
之前在渲染UI
结构时候,拼接字符串是比较麻烦的,而且很容易出现问题
模板引擎,它可以根据程序员指定的 模板结构 和 数据,自动生成一个完整的HTML页面
好处
减少了字符串的拼接操作
使代码结构更清晰
使代码更易于阅读与维护
art-template模板引擎
简介
art-template 是一个简约,超快的模板引擎,中文官首页:art-template
安装
-
浏览器访问 安装 - art-template
-
找到 安装 导航栏,找到下载链接,右键下载即可
-
基本使用
通过传统方式渲染的过程,我们了解到,动态去渲染UI
的时候需要大量去拼接字符串,比较的麻烦,而且复用性也不是很好
art-template使用步骤
-
导入
art-template
-
在window全局,就多了一个函数,叫做 template('模板id',需要渲染的数据对象)
<script src="./lib/template-web.js"></script>
-
-
定义数据
var data = { name: 'zs', age: 20}
-
定义模板
-
模板的 HTML 结构,必须定义到
script
标签中,注意:需要把type属性改成text/html
-
给 模板 添加一个
id
-
模板里面如果需要使用到传入的数据,利用 {{}} 来实现,例如:{{name}},那么就会去找 我们调用 template() 函数 第二个参数里面对应的
name
属性的值
<script type="text/html" id="tpl-user"> <h1>{{name}} ------ {{age}}</h1> </script>
-
-
调用
template
函数-
函数的返回值就是拼接好的模板字符串
var htmlStr = template('tpl-user', data)
-
-
渲染
HTML
结构-
最后我们需要把template返回的模板字符串设置到页面容器中
$('#container').html(htmlStr)
-
标准语法
什么是标准语法
art-template 提供了 {{}} 这种语法格式,在 {{}} 内可以进行 变量输出 或 循环数组 等操作,这种 {{}} 语法在 art-template 中被称为标准语法
输出
在 {{}} 语法中,可以进行 变量 的输出,对象属性的输出,三元表达式输出,逻辑或输出,加减乘除等表达式输出
原文输出
如果输出的 value 值中,包含了 HTML 标签结构,则需要使用原文输出语法,才能保证HTML标签被正常渲染
条件输出
如果要实现条件输出,则可以在 {{}} 中使用 if...else if.../if 的方式,进行按需输出
循环输出
如果要实现循环输出,则可以在{{}} 内,通过 each 语法循环数组,当前循环的索引使用 $index
进行访问,当前循环项使用 $value
进行访问
过滤器
过滤器本质就是一个 function
函数
语法
过滤器语法类似于 管道操作符,它的上一个输出作为下一个输入
定义过滤器的基本语法如下:
案例-格式化时间过滤器
-
定义数据
var data = { regTime: new Date() }
-
定义过滤器
// 定义处理时间的过滤器 template.defaults.imports.dateFormat = function (date) { var y = date.getFullYear() var m = date.getMonth() + 1 var d = date.getDate() return y + '-' + m + '-' + d }
-
在模板引擎中使用过滤器
<script type="text/html" id="tpl-user"> <h3>{{regTime | dateFormat}}</h3> </script>
模板引擎的实现原理
正则与字符串操作
exec函数
exec()
函数用于 检索字符串 中的正在表达式的匹配
如果字符串中又匹配的值,则返回该匹配值,否则返回 null
示例代码如下:
分组
正则表达式中 () 包起来的内容表示一个分组,可以通过分组来 提取自己想要的内容,示例代码如下
字符串的 replace 函数
replace() 函数用于在字符串中 用一些字符 替换 另一些字符的
示例代码:
多次replace
使用循环来replace
因为用户输入的字符串长度不确定,我们replace次数不确定,所以我们可以利用while循环来进行
实现简易的模板引擎
-
定义模板结构
-
预调用模板引擎
-
封装 template 函数
-
导入并使用自定义的模板引擎
总结
以上就是今天要讲的内容,本文仅仅简单介绍了ajax中表单的使用,欢迎大家留言讨论和纠正。