【前端】Ajax-form表单与模板引擎
目录
一、form表单的基本使用
1.1什么是表单
1.2表单的组成部分
1.3form标签属性
1.4表单的同步提交及缺点
1.4.1什么是表单的同步提交
1.4.2表单同步提交的缺点
1.4.3如何解决表单同步提交的缺点
二、通过Ajax提交表单数据
2.1监听表单提交事件
2.2阻止表单默认提交行为
2.3快速获取表单中的数据
2.3.1serialize()函数
三、模板引擎的基本概念
3.1渲染UI结构时遇到的问题
3.2什么是模板引擎
3.3模板引擎的好处
四、art-template模板引擎
4.1art-template简介
4.2art-template模板引擎的基本使用
4.3art-template标准语法
4.3.1标准语法-原文输出
4.3.2标准语法-条件输出
4.3.3标准语法-循环输出
4.3.4标准语法-过滤器
五、模板引擎的实现原理
5.1正则与字符串操作
5.1.1基本语法
5.1.2分组
5.1.3字符串的replace函数
5.1.4多次replace
5.1.5使用while循环replace
5.1.6replace替换为真值
5.2实现简易的模板引擎
5.2.1实现步骤
一、form表单的基本使用
1.1什么是表单
表单在网页中主要负责数据采集功能。
1.2表单的组成部分
表单由三个基本部分组成：表单标签、表单域、表单按钮。
1.3form标签属性
<form>标签用来收集数据，<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。
- 当未指定action属性值的情况下，action的默认值为当前页面的URL地址。
- target属性中：_blank:在新窗口中打开，_self:默认，在相同的框架中打开，_parent：在父框架中打开，_top:在整个窗口中打开，framename:在指定的框架中打开。
- method属性中：get适合用来提交少量的、简单的数据；post适合用来提交大量的、复杂的、或包含文件上传的数据。
- 在使用包含文件上传控件的表单时，enctype属性必须使用multipart/form-data值。
1.4表单的同步提交及缺点
1.4.1什么是表单的同步提交
通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交。
1.4.2表单同步提交的缺点
1、表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址，用户体验很差。
2、表单同步提交后，页面之间的状态和数据会丢失。
1.4.3如何解决表单同步提交的缺点
解决方案：表单只负责采集数据，Ajax负责将数据提交到服务器。
二、通过Ajax提交表单数据
2.1监听表单提交事件
$(function () {//第一种方式$('#f1').submit(function () {alert('监听到表单提交事件')})//第二种方式$('#f1').on('submit', function () {alert('监听到表单提交事件')})})2.2阻止表单默认提交行为
当监听到表单的提交事件之后，可以调用事件对象的event.preventDefault()函数，来阻止表单的提交和页面的跳转，示例代码如下：
//第一种阻止方式$('#f1').submit(function (e) {alert('监听到表单提交事件')e.preventDefault()})//第二阻止种方式$('#f1').on('submit', function (e) {alert('监听到表单提交事件')e.preventDefault()})2.3快速获取表单中的数据
2.3.1serialize()函数
$(selector).serialize()好处：可以一次性获取表单中的所有的数据，但是必须为每个表单元素添加name属性！
三、模板引擎的基本概念
3.1渲染UI结构时遇到的问题
如果UI结构比较复杂，则拼接字符串的适合需要格外注意引号之间的嵌套，且一旦需求发生改变，修改起来也非常麻烦。
3.2什么是模板引擎
根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。
3.3模板引擎的好处
1、减少了字符串的拼接操作
2、使代码结构更清晰
3、使代码更易于阅读和维护
四、art-template模板引擎
4.1art-template简介
中文官网：art-template (aui.github.io)
4.2art-template模板引擎的基本使用
步骤：
- 导入art-template
- 定义数据
- 定义模板
- 调用template函数
- 渲染HTML结构
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.导入模板引擎 --><!-- 在window全局，多一个函数，叫做template('模板的id'，需要渲染的数据) --><script src="./template-web.js"></script><script src="./jquery.min.js"></script>
</head><body><div id="container"></div><!-- 3.定义模板 --><!-- 模板的HTML结构，必须定义到script中 --><script type="text/html" id="tpl-user"><h1>{{name}}</h1></script><script>// 2.定义需要渲染的数据var data = { name: 'zs' }//4.带用template函数var htmlstr = template('tpl-user', data)$('#container').html(htmlstr)</script>
</body></html>4.3art-template标准语法
4.3.1标准语法-原文输出
{{@ value}}如果要输出的value值中，包含了HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染。
4.3.2标准语法-条件输出
如果要实现条件输出，则可以在{{}}中使用if...else if.../if的方式，进行按需输出。
{{if value}}按需输出的内容{{/if}}{{if v1}}按需输出的内容{{else if v2}}按需输出的内容{{/if}}{{if flag===0}}flag的值为0{{else if flag===1}}flag的值为1{{/if}}4.3.3标准语法-循环输出
如果要实现循环输出，则可以在{{}}内，通过each语法循环数组，当循环的索引使用$index进行访问，当前的循环项使用$value进行访问。
{{each arr}}{{$index}}{{$value}}{{/each}}{{each hobby}}<li>索引是：{{$index}},循环项是：{{$value}}</li>{{/each}}4.3.4标准语法-过滤器
过滤器的本质，就是一个function处理函数。
{{value | filterName}}过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
定义过滤器的基本语法如下：
template.defaults.imports.filterName = function (value) {// return处理的结果}示例：
<script type="text/html" id="tpl-user"><h3>{{regTime|dataFormat}}</h3></script><script>template.defaults.imports.dataFormat = function (date) {var y = date.getFullYear()var m = date.getMonth() + 1var d = date.getDate()return y + '-' + m + '-' + d// return处理的结果}var data = {regTime: new Date() }</script>
五、模板引擎的实现原理
5.1正则与字符串操作
5.1.1基本语法
exec()函数用于检索字符串中的正则表达式的匹配。
如果字符串中有匹配的值，则返回该匹配值，否则返回null。
RegEzpObject.exec(string)示例：
<script>var str = 'hello'var pattern = /o/var result = pattern.exec(str)console.log(result);</script>5.1.2分组
正则表达式中（）包起来的内容表示一个分组，可以通过分组来提取自己想要的内容。
示例：
<script>var str = '<div>我是{{name}}</div>'var pattern = /{{([a-zA-A]+)}}/var result = pattern.exec(str)console.log(result);</script>5.1.3字符串的replace函数
replace()函数用于在字符串中用一些字符替换另一些字符。
var result='123456'.replace('123','abc')//得到'abc456'示例：
var str = '<div>我是{{name}}</div>'var pattern = /{{([a-zA-A]+)}}/var patternResult = pattern.exec(str)str = str.replace(patternResult[0], patternResult[1]) //数组0是正则选出的内容，数组1是不含符号的文本内容console.log(str);5.1.4多次replace
var str = '<div>我是{{name}}今年{{ age }}岁了</div>'var pattern = /{{\s*([a-zA-A]+)\s*}}///第一次匹配var res1 = pattern.exec(str)str = str.replace(res1[0], res1[1]) //数组0是正则选出的内容，数组1是不含符号的文本内容console.log(str); //<div>我是name今年{{ age }}岁了</div>//第二次匹配var res2 = pattern.exec(str)str = str.replace(res2[0], res2[1]) //数组0是正则选出的内容，数组1是不含符号的文本内容console.log(str); //<div>我是name今年age岁了</div>5.1.5使用while循环replace
var str = '<div>我是{{name}}今年{{ age }}岁了</div>'var pattern = /{{\s*([a-zA-A]+)\s*}}/var patternResult = nullwhile (patternResult = pattern.exec(str)) {str = str.replace(patternResult[0], patternResult[1])}console.log(str);5.1.6replace替换为真值
var data = { name: '张三', age: 20 }var str = '<div>我是{{name}}今年{{ age }}岁了</div>'var pattern = /{{\s*([a-zA-A]+)\s*}}/var patternResult = nullwhile (patternResult = pattern.exec(str)) {str = str.replace(patternResult[0], data[patternResult[1]])}console.log(str);5.2实现简易的模板引擎
5.2.1实现步骤
1、定义模板结构
2、预调用模板引擎
3、封装template函数
4、导入并使用自定义的模板引擎
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 导入自定义的模板引擎 --><!-- <script src="./template.js"></script> -->
</head><body><div id="user-box"></div><!-- 1.定义模板结构 --><script type="text/html" id="tpl-user"><div>姓名：{{name}}</div><div>年龄：{{ age }}</div><div>性别：{{ gender}}</div><div>住址：{{address }}</div></script><script>// 2.预调用var data = { name: '张三', age: 18, gender: '男', address: '中国山东' }var htmlStr = template('tpl-user', data)document.getElementById('user-box').innerHTML = htmlStr//3.封装function template(id, data) {var str = document.getElementById(id).innerHTMLvar pattern = /{{\s*([a-zA-A]+)\s*}}/var patternResult = nullwhile (patternResult = pattern.exec(str)) {str = str.replace(patternResult[0], data[patternResult[1]])}return str}</script>
</body></html>【前端】Ajax-form表单与模板引擎相关推荐
- 前端_网页编程 Form表单与模板引擎（上）
目录 一.form表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...
- 前端_网页编程 Form表单与模板引擎（下）
目录 续上一篇 6. 模板引擎的实现原理 6.1 正则与字符串操作 6.1.1 基本语法 6.1.2 分组 6.1.3 字符串的replace函数 6.1.4 多次replace 6.1.5 使用wh ...
- 前端_网页编程 Form表单与模板引擎（中）
目录 ... ... (续上篇) 四.模板引擎的基本概念 1.定义 2. 优点 五.art-template模板引擎 1.art-template模板引擎介绍 2. art-template的安装 3 ...
- Form表单及模板引擎
Form表单及模板引擎 什么是Form表单 Form表单的一些属性 表单的同步提交及优缺点 通过Ajax提交表单数据 JQuery的监听表单提交事件 取消表单默认提交行为 快速获取表单中的数据 模板引 ...
- form表单与模板引擎
form表单与模板引擎 一.form表单的基本使用 1.1 什么是表单 1.2 表单的组成部分 1.3 <form>标签的属性 1.4 表单的同步提交及缺点 二.通过ajax提交表单数据 ...
- 前后端交互之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提 ...
- 前后端交互：form表单与模板引擎
目录 form表单 基础知识 概念 组成 常用属性 表单同步提交 概念 缺点 表单事件监听 submit监听方式 on监听方式 阻止表单默认行为 serialize 快速获取表单提交的数据 模板引擎 ...
- from提交ajax,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- ajax form表单提交 input file中的文件
现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input f ...
最新文章
- oracle中set怎么用,sqlplus命令格式以及sqlplus中set的用法与解释-Oracle
- apache+svn
- pcb 假八层_八层板的成本却只六层的性能，PCB设计遭遇假八层该怎么办？
- ORACLE 字符串函数用法（转载）
- c语言程序设计橙皮,橙皮_中药词典C_中医中药网
- 如何隐藏 video 元素的下载按钮
- android url格式化,Android利用SpannableString实现格式化微博内容
- 开会浪费时间？高效会议的秘诀，是用数据支撑
- pandas 替换 某列大于_Pandas使用总结
- TOOLS STORE OPENCART 2.X 主题模板 ABC-0628
- 测试到产品经理的进阶之路
- 浅谈静态方法与静态变量
- 机器学习指南_管理机器学习实验的快速指南
- canvas 实现图片添加水印
- 顺德苹果售后维修体验
- 白嫖亚马逊AWS服务器
- Q/W防洪跳转页面/微信小程序跳转到未备案域名
- 《北风网网友录制Silverlight入门系列视频教程》共23课时/更新完毕[压缩包]
- linux no such job,linux中no such job是什么意思
- wordpress后台管理（八）外观-DUX主题设置：设置网站Logo/布局/主题风格/页面/列表设置/文章/广告/热门排行/特别推荐等等