从form表单与模板引擎开始学习Day15

属性	值	描述
action	URL地址	规定当提交表单时，向何处发送表单数据
method	get或post	规定以何种方式把表单数据提交到action URL
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在发送表单数据之前如何对其进行编码
target	_blank _self _parent _top framename	规定在何处打开action URL

1.3.1action

action 属性用来规定当提交表单时，向何处发送表单数据。

action属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。

当<form>表单在未指定 action属性值的情况下，action的默认值为当前页面的URL地址。

注:

当提交表单后，页面会立即跳转到action属性指定的URL地址

1.3.2 target

target属性用来规定在何处打开action URL。

它的可选值有5个，默认情况下，target的值是_self，表示在相同的框架中打开action URL。

值	描述
_blank	在新窗口中打开。
_self	默认。在相同的框架中打开。
_parent	在父框架集中打开。(很少用)
_top	在整个窗口中打开。(很少用)
framename	在指定的框架中打开。(很少用)

1.3.3method

method属性用来规定以何种方式把表单数据提交到action URL。

它的可选值有两个，分别是get和post。

默认情况下，method的值为get，表示通过URL地址的形式，把表单数据提交到action URL。

注:

get方式适合用来提交少量的、简单的数据。
post方式适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中，<form>表单的post提交方式用的最多，很少用get。例如登录、注册、添加数据等表单操作，都需要使用post方式来提交表单。

1.3.4enctype

enctype属性用来规定在发送表单数据之前如何对数据进行编码。

它的可选值有三个，默认情况下，enctype的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认)不对字符编码。
multipart/form-data	在使用包含文件上传控件的表单时，必须使用该值。
text/plain	空格转换为“+”加号，但不对特殊字符编码。(很少用)

注:

在涉及到文件上传的操作时，必须将enctype的值设置为multipart/form-data
如果表单的提交不涉及到文件上传操作，则直接将enctype的值设置为application/x-www-form-urlencoded即可

1.4表单的同步提交及缺点

1.4.1什么是表单的同步提交

通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交。

1.4.2表单同步提交的缺点

<form>表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址，用户体验很差。
<form>表单同步提交后，页面之前的状态和数据会丢失。

解决方案:表单只负责采集数据，Ajax负责将数据提交到服务器。

2、通过Ajax提交表单数据

2.1监听表单提交事件

在jQuery 中，可以使用如下两种方式，监听到表单的提交事件:

$ ("#form1' ) .submit ( function(e) {
alert(·监听到了表单的提交事件')

})

$('#form1' ) .on ( 'submit', function(e){
alert ('监听到了表单的提交事件')
})

2.2阻止表单默认提交行为

当监听到表单的提交事件以后，可以调用事件对象的event.preventDefault(函数，来阻止表单的提交和页面的跳转，示例代码如下:

$ ( '#form1 ' ) .submit (function(e) {
        //阻止表单的提交和页面的跳转

        e.preventDefault()
})
$ ("#form1' ) .on ( ' submit' , function(e){
//阻止表单的提交和页面的跳转
        e.preventDefault ()
})

2.3快速获取表单中的数据

2.3.1.serialize()函数

为了简化表单中数据的获取操作，jQuery提供了serialize()函数，其语法格式如下:

$ (selector) .serialize()

serialize()函数的好处:可以一次性获取到表单中的所有的数据。

2.3.2.serialize()函数示例

<form id="form1">
    <input type="text" name="username"/>
    <input type="password" name="password"/>
    <button type="submit">提交</button>
</form>

$ ('#form1 ' ) .serialize ( )
//调用的结果:
//username 用户名的值&password=密码的值

注:在使用serialize()函数快速获取表单数据时，必须为每个表单元素添加name属性!

3、模板引擎的基本概念

3.1渲染UI结构时遇到的问题

var rows = [ ]
    $.each(rs.data,function (i, item){         //循环拼接字符串
        rows.push ( '<li class="list-group-item">'+ item.content +'<span class="badgecmt-date">评论时间: '+ item.time +'</span><span class="badge cmt-person">评论人:'+item. username +'</span></li> ')
})
$ ( ' #cmt-list ' ) . empty ( ) .append (rows.join( ''))    //渲染列表的UI结构

上述代码是通过字符串拼接的形式，来渲染Ul结构。
如果U结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦。

3.2什么是模板引擎

模板引擎，顾名思义，它河以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。

3.3模板引擎的好处

（1）减少了字符串的拼接操作

（2）使代码结构更清晰

（3）使代码更易于阅读与维护

4、art-template模板引擎

4.1 art-template简介

art-template是一个简约、超快的模板引擎。

中文官网首页为http://aui.github.io/art-template/zh-cn/index.html

4.2 art-template的安装

在浏览器中访问http://aui.github.io/art-template/zh-cn/docs/installation.html页面，找到下载链接后，鼠标右键，选择“链接另存为”，将art-template下载到本地，然后，通过<script>标签加载到网页上进行使用。

4.3 art-template模板引擎的基本使用

art-template的使用步骤

导入art-template
定义数据
定义模板
调用template 函数
渲染HTML结构

4.4 art-template标准语法

4.4.1什么是标准语法

art-template提供了{{ }}这种语法格式，在{{ }}内可以进行变量输出，或循环数组等操作，这种{{ }}语法在art-template中被称为标准语法。

4.4.2标准语法——输出

{ {value} }
{ {obj.key} }
{ {obj [ ' key ' ]} }
{ {a ? b : c} }
{ {a ll b} }
{ {a + b} }

在{{}}语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

4.4.3标准语法——原文输出

{ {@ value } }

如果要输出的value值中，包含了HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染。

4.4.4标准语法——条件输出

如果要实现条件输出，则可以在{ { } }中使用if ... else if .../if 的方式，进行按需输出。

{ { if value} }按需输出的内容{ { /if } }
{ { if v1 } }按需输出的内容{ { else if v2 } }按需输出的内容 { { /if } }

4.4.5标准语法–循环输出

如果要实现循环输出，则可以在{}内，通过each语法循环数组，当前循环的索引使用$index进行访问，当前的循环项使用$value进行访问。

{ {each arr} }
{ {$index} } { {$value} }
{ { /each} ]

4.4.6标准语法—过滤器

过滤器的本质，就是一个function处理函数。

{ { value | filterName } }

过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

定义过滤器的基本语法如下:

template.defaults.imports.filterName = function (value){ /*return处理的结果*/}

定义一个格式化时间的过滤器dateFormat 如下:

template.defaults.imports.daterormat = function(date) {
var y = date.getFullrear ()
var m = date.getMonth () + 1var d = date.getDate ()
return y + '-' + m + '-' + d l/注意，过滤器最后一定要return一个值

5、模板引擎的实现原理

5.1正则与字符串操作

5.1.1基本语法

exec()函数用于检索字符串中的正则表达式的匹配。

如果字符串中有匹配的值，则返回该匹配值，否则返回null。

RegExpobject.exec (string)

示例代码如下:

var str = 'hello'

var pattern = /o/

//输出的结果[ "o", index: 4, input: "hello",groups: undefined]

console.log (pattern.exec( str) )

5.1.2分组

正则表达式中()包起来的内容表示一个分组，可以通过分组来提取自己想要的内容

5.1.3字符串的replace函数

replace()函数用于在字符串中用一些字符替换另一些字符，语法格式如下:

var result = '123456'.replace ( '123','abc' )//得到的 result的值为字符串 'abc456'

晋龍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从form表单与模板引擎开始学习Day15

目录1、form表单的基本使用1.1什么是表单1.2表单的组成部分1.3 1.3.1action1.3.2 target1.3.3method1.3.4enctype1.4表单的同步提交及缺点1.4.1什么是表单的同步提交1.4.2表单同步提交的缺点2、通过Ajax提交表单数据2.1监听表单提交事件2.2阻止表单默认提交行为2.3快速获取表单中的数据2.3.1.serialize()函数2.3.2.serialize()函数示例3、模板引擎的基本概念3.1渲染UI结构时遇到的问题3.2什么是模板引擎3.3模
复制链接

扫一扫