什么是Form表单

表单在网页中主要负责数据采集功能，通过<form></form>标签的提交操作，把采集到的信息提交到服务器端进行处理。
表单的主要组成部分：表单标签、表单域、表单按钮
表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框以及文件上传框等等。

Form表单的一些属性

属性	值	描述
action	url地址	规定提交表单时向何处发送表单数据，未指定时默认是当前页面的url地址，提交表单后，页面会自动跳转至action的url地址，如果method是get，那么要提交的数据会通过符号？拼接到url地址后面
method	get（少量数据）或者post（登录、大量数据、文件上传）	规定提交到action中url的形式，默认为get。当method为post时，要提交的数据将会以Form Data对象的形式提交，而不是拼接在url地址中
target	_self(默认)、_blank	指定在何处打开action的url，blank表示在新窗口打开，self表示在同框架中打开
enctype	application / x-www-form-urlencoded（默认） multipart/form-data（使用文件上传时必须使用）	规定在发送表单数据之前如何对数据进行编码

表单的同步提交及优缺点

表单的同步提交：通过点击submit按钮，触发表单提交操作，从而使页面跳转到action的url地址的行为。
表单同步提交的缺点：

1. 提交后整个页面都将发生跳转，用户体验很差。
2. 同步提交后，页面之前的状态和数据将会丢失。

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

通过Ajax提交表单数据

JQuery的监听表单提交事件

第一种方法：

$("#sbt").submit(functiong(){console.log("监听到了表单提交事件");
});

第二种方法：

$("#sbt").on("submit",function(){console.log("监听到了表单提交事件");
});

取消表单默认提交行为

当监听到了表单的提交事件时，可以调用事件对象event.preventDefault()方法来取消表单默认提交行为。

$("#sbt").on("submit",function(e){e.preventDefault();
});

快速获取表单中的数据

为了简化表单中数据的获取操作，jQuery提供了serialize()函数，可以一次性获取到表单中的所有数据。返回结果为字符串，以键值对的形式，并用&符号拼接
注意：当使用serialize()函数快速获取表单元素的数据时，需要为每一个表单元素设置name属性。

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

模板引擎

之前渲染UI结构的时候是通过字符串拼接来实现的，这样做的弊端在于，当UI结构比较复杂的时候需要格外注意引号之间的嵌套，且不利于后期的维护。这时候就需要用到模板引擎。
模板引擎：可以根据指定的模板结构和数据，自动生成一个完整的HTML页面。

模板引擎的好处

1. 减少了字符串的拼接操作
2. 使代码结构清晰
3. 使代码便于阅读和后期的维护

art-template模板引擎

附上下载链接：点击前往下载art-template模板引擎

使用art-template模板引擎

1. 导入art-template
2. 定义数据
3. 定义模板
4. 调用template()函数
5. 渲染HTML结构

1.导入template-web.js

<!-- 引入所需js文件 -->
<script src="template-web.js"></script>

2.定义数据

//定义需要渲染的数据
var data = {name: "张三",flag: 1,text: "<h1>这是一条消息</h1>"
}

3.定义模板

模板的HTML结构必须定义到script标签里面，并且将script标签的type属性改为text/html，让浏览器以HTML的形式解析标签里面的内容。
{{}}双花括号是template模板引擎提供的一个占位符，表示这里要填充指定的数据。

<script type="text/html" id="tpl-user"><h1>{{name}}</h1>
</script>

4.调用template()函数

template()函数的基本语法：

var htmlStr =  template('模板的ID', 需要渲染的数据对象);
//template函数返回的是字符串，字符串中包含定义模板的HTML结构
//这里的htmlStr的值为'<h1>张三</h1>'

调用：

//ID不需要加#
template('tpl-user', data);

5.渲染HTML结构

var div = document.getElementById('container');
div.innerHTML = htmlStr;

art-template标准语法

输出

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

<script type="text/html" id="tpl-user"><div>//变量的输出{{value}}//对象属性的输出{{obj.name}}{{obj["name"]}}//三元表达式的输出{{a ? b : c}}//逻辑或的输出{{a || b}}//加法的输出{{a + b}}</div>
</script>

原文输出

如果要输出的value值中包含了HTML标签结构，则需要使用原文输出的语法，才能保证HTML标签被正常渲染。
原文输出语法：{{@ value}}（看清楚语法中间有空格）

<script type="text/html" id="tpl-user">{{@ text}}
</script>

条件输出

如果要实现条件输出，则可以在{{}}中使用if…else if…/if进行条件输出

<script type="text/html" id="tpl-user"><div>{{if flag === 0}}{{flag的值是0}}{{else if flag === 1}}{{flag的值是1}}{{\if}}</div>
</script>

循环输出

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

//循环遍历arr数组
<script type="text/html" id="tpl-user"><ul>{{each arr}}<li>索引是：{{$index}}  所对应的值是：{{$value}}</li>{{/each}}</ul>
</script>

过滤器

过滤器的本质是一个function处理函数，输入参数，输出一个新的值，过滤器的语法类似管道操作符"|"，它的上一个输出作为下一个的输入。
过滤器语法：

<script type="text/html" id="tpl-user">{{value | filterName}}//将左边的value值传给filterName函数，然后整体输出一个新值//filterName是函数自定义名，可以自己修改
</script><script>//定义过滤器的基本语法template.defaults.imports.filterName = function(value){/*return 处理的结果*/}
</script>

模板引擎的实现原理

模板引擎的实现原理主要是依靠正则表达式与字符串的操作(replace)实现的。

正则表达式

正则表达式中的exec()函数可以检索指定的字符串，检索成功返回一个集合被检索项的相关信息的一个数组，否则返回null
示例：

var reg = /\s*{{([A-z]+)}}\s*/;
var str = "<div>{{name}}的职业是{{ job }}</div>";
var regResult = reg.exec(str);
console.log(regResult);

执行结果：

字符串的替换replace()

replace()函数用于在一些字符串中用一些字符替换另一些字符，并返回一个新的字符串，原字符串不受影响。

//基本语法
//str.replace("需要被替换的字符","取代字符");
var str = "123456".replace('123','ASD');
//str变为："ASD456"

模板引擎的核心原理

模板引擎的核心原理就是借助正则表达式匹配到{{}}内的内容，然后用字符串的替换操作替换为我们设定的数据。下面是核心代码：

var data = {name: "张三", job: "前端工程师"};
var str = "<div>{{name}}的职业是{{ job }}</div>";
var reg = /{{\s*([A-z]+)\s*}}/;
var regResult = null;
while((regResult = reg.exec(str))){str = str.replace(regResult[0], data[regResult[1]]);
}
console.log(str);
//结果：<div>张三的职业是前端工程师</div>

Form表单及模板引擎相关推荐

1. 前端_网页编程 Form表单与模板引擎（下）

   目录 续上一篇 6. 模板引擎的实现原理 6.1 正则与字符串操作 6.1.1 基本语法 6.1.2 分组 6.1.3 字符串的replace函数 6.1.4 多次replace 6.1.5 使用wh ...

2. 前端_网页编程 Form表单与模板引擎（中）

   目录 ... ... (续上篇) 四.模板引擎的基本概念 1.定义 2. 优点 五.art-template模板引擎 1.art-template模板引擎介绍 2. art-template的安装 3 ...

3. 前端_网页编程 Form表单与模板引擎（上）

   目录 一.form表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...

4. form表单与模板引擎

   form表单与模板引擎 一.form表单的基本使用 1.1 什么是表单 1.2 表单的组成部分 1.3 <form>标签的属性 1.4 表单的同步提交及缺点 二.通过ajax提交表单数据 ...

5. 前后端交互之form表单和模板引擎

   目录 一.Form表单 1.1 标签属性 1.1.1 action 1.1.2 target 1.1.3 method 1.1.4 enctype 1.2 表单的同步提交及缺点 1.3 通过Ajax提 ...

6. 前后端交互：form表单与模板引擎

   目录 form表单 基础知识 概念 组成 常用属性 表单同步提交 概念 缺点 表单事件监听 submit监听方式 on监听方式 阻止表单默认行为 serialize 快速获取表单提交的数据 模板引擎 ...

7. 【前端】Ajax-form表单与模板引擎

   目录 一.form表单的基本使用 1.1什么是表单 1.2表单的组成部分 1.3form标签属性 1.4表单的同步提交及缺点 1.4.1什么是表单的同步提交 1.4.2表单同步提交的缺点 1.4.3如 ...

8. django之：网页伪静态 JsonResponse form表单携带文件数据 CBV源码分析 模板语法传值 模板语法之过滤器 标签 自定义标签函数 过滤器、inclusion_tag模板的继承导入

   目录标题 一:网页伪静态 1.定义 2.如何实现 二:视图层 1.视图函数返回值问题 2.视图层返回json格式的数据 3.form表单携带文件数据 4.CBV源码分析 1.CBV和FBV: 2.CB ...

9. java_web1:基本标签、form表单、frameset框架标签、CSS样式、javascript、servlet

   前端三剑客: html,css,js(javascript) html: Hyper Text Markup Language:超文本标记语言 针对字体,图片,视频,音频等等进行操作,设置字体颜色,大 ...

最新文章

1. VS2005相关----整理起始页面板
2. linux curl没有内容,curl在tcpdump中没有显示输出
3. 汇编语言--不可屏蔽中断
4. ListView position
5. 移动端点击（click）事件延迟问题的产生与解决方法
6. python把英语句子成分字母_英语句子成分－谓语讲解 什么是谓语？（
7. read/fread write/fwrite 的区别
8. Linux中断 - tasklet
9. 接口里面的方法都是抽象方法吗_大家都在讲高中学习的方法有哪些，那方法和技巧有什么异同的吗？...
10. 如何发布.Net MVC 网站项目（攻略集锦）
11. 2018年4月10日--python解决乱码和作业
12. Unix环境高级编程笔记：12、高级IO
13. day21-字节流和字符流
14. Halcon 深度学习（一）：分类
15. 卸载mac的flash player
16. MSP430F149最小系统原理图与芯片封装分享
17. 使用Python进行数独求解（一）
18. reactjs遍历数据的方式
19. 《Netkiller Spring Cloud 手札》之 Spring Cloud Consol
20. 爬去东方财富网龙虎榜（wechat：15353378609）

热门文章

1. 云弹性:它如何影响云计算?
2. Nachos实验实现线程id、限制线程数和更改调度算法（按优先级调度）
3. [渝粤教育] 西安电子科技大学 工程制图与计算机绘图 参考 资料
4. GPU 资源消耗原因和解决方案：
5. 什么是Google广告：AdSence令数多人致富
6. Linux —— chown -R mysql:mysql ./及chown详解
7. C++ 实现两线段是否相交、相交情况、若相交求出交点坐标
8. CSS3之渐变（线性渐变，径向渐变）
9. 22考研基础阶段计划；超七成考研人已开始复习！
10. visio使用小知识