form表单

基础知识

概念

组成

常用属性

表单同步提交

概念

缺点

表单事件监听

submit监听方式

on监听方式

阻止表单默认行为

serialize 快速获取表单提交的数据

模板引擎

基础知识

概念

优点

art-template模板引擎

使用

标准语法

form表单

基础知识

概念

<form> 标签用于为用户输入创建 HTML 表单，表单用于向服务器传输数据。

组成

表单标签
表单域：文本框、密码框、多行文本框、复选框、单选框、下拉选择框、文件上传框等
表单按钮 button

常用属性

action ：提交表单时，向何处发送表单

默认值就是当前网页的URL地址
提交后表单会跳转到action属性设置的URL地址

target：规定在何处打开action URL

默认 _self 在相同和框架中打开action URL （在当前网页打开）

method：规定何种方式把表单提交到 action URL

post：提交数据更加隐蔽，适合大量、复杂的或者文件上传；
get：默认，可在在网址里面可以看到用户提交的信息不安全，适合少量的、简单的数据；

enctype：规定发送表单数据之前如何对数据进行编码

表单同步提交

概念

触发提交按钮让页面发生跳转到 action URL的行为。表单具有默认的提交行为，默认是同步的。form标签内部的 action 和 method 属性就是用来编写同步的提交行为，同步表单提交，浏览器会直接将服务器响应的内容渲染到页面上。

缺点

页面发生跳转
页面之前的状态和数据会丢失
推荐：表单只负责采集数据，Ajax负责将数据提交到服务器

表单事件监听

submit监听方式

<form action="./index.html" method="post"><input type="submit" value="">
</form><script>$("form").submit(function (e) {console.log('submit监听表单事件');})
</script>

on监听方式

<form action="./index.html" method="post"><input type="submit" value="">
</form><script>$("form").on('submit', function (e) {console.log('on 监听表单事件');})
</script>

阻止表单默认行为

<form action="./index.html" method="post"><input type="submit" value="">
</form><script>$("form").on('submit', function (e) {e.preventDefault();//阻止表单默认提交行为})

serialize 快速获取表单提交的数据

语法：$ ( selector ). serialize（）
返回值：form表单中所有带有name属性的表单元素的值，使用&符号衔接；

没有name属性的表单元素是无法获取的！

<form id="form1"><input type="text" name="username" /><input type="password" name="password" /><button type="submit"> 提交</button></form><script>$('#form1').serialize();//调用的结果:// username = 用户名的值 & password = 密码的值</script>

模板引擎

基础知识

概念

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

优点

减少字符串的拼接
代码结构更清晰
易于维护阅读

art-template模板引擎

使用

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

代码结构：

<body><!-- 1. 导入art-template --><script src="./template-web.js"></script><script src="./jQuery.min.js"></script><div id="container">我是容器 我用来装渲染好的结构</div><!-- 3.定义模板 --><script type="text/html" id="tpl"><h1>{{name}}----{{age}}</h1></script><script>//2.定义数据var data = { name: 'zs', age: 20 };//4.调用template函数var htmlstr = template('tpl', data);//5.渲染HTML结构$("#container").html(htmlstr);</script></body>

效果展示：

标准语法

原文输出：{{@ value}} ：适用于带标签的内容例如 <span></span>

条件输出：if ... else if... /if

<script type="text/html">{{if value}}输出内容{{/if}}{{if value1}}输出内容1{{else if value2}}输出内容2{{/if}}
</script>

循环输出：each遍历数组

<script type="text/html">{{each arr}}{{$index}} {{$value}}{{/each}}
</script>

过滤器：本质是function函数

<script type="text/html"><div>注册时间：{{regTime | dataFormat}}</div></script><script>template.defaults.imports.dataFormat = function (dates) {var date = new Date(dates);var y = date.getFullYear();var m = date.getMonth() + 1;var d = date.getDate();var h = date.getHours();var mi = date.getMinutes();var s = date.getSeconds();m = m > 9 ? m : "0" + m;d = d > 9 ? d : "0" + d;h = h > 9 ? h : "0" + h;mi = mi > 9 ? mi : "0" + mi;s = s > 9 ? s : "0" + s;return `${y}-${m}-${d}  ${h}:${mi}:${s}`;}
</script>

正则表达式 exec函数：检索字符串中的正则表达式的匹配

<script>//查询时候含有该字符串  有返回匹配值  没有返回nullvar str = 'hello';var pattern1 = /o/;var pattern2 = /m/;// 输出的结果为一个数组["o", index: 4, input: "hel1o", groups: undefined]console.log(pattern1.exec(str));//无法匹配返回 nullconsole.log(pattern2.exec(str));</script><script>var str = '<div>我是{{name}}</div>';var pattern = /{{([a-zA-Z]+)}}/;var patternResult = pattern.exec(str);console.log(patternResult);//得到name相关的分组信息// ["{{name}}", "name", index: 7， input: "<div> 我是{{name}}</div>", groups: unde fined]</script>

前后端交互：form表单与模板引擎相关推荐

前端_网页编程 Form表单与模板引擎（上）
目录一.form表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...
前端_网页编程 Form表单与模板引擎（中）
目录 ... ... (续上篇) 四.模板引擎的基本概念 1.定义 2. 优点五.art-template模板引擎 1.art-template模板引擎介绍 2. art-template的安装 3 ...
前端_网页编程 Form表单与模板引擎（下）
目录续上一篇 6. 模板引擎的实现原理 6.1 正则与字符串操作 6.1.1 基本语法 6.1.2 分组 6.1.3 字符串的replace函数 6.1.4 多次replace 6.1.5 使用wh ...
form表单与模板引擎
form表单与模板引擎一.form表单的基本使用 1.1 什么是表单 1.2 表单的组成部分 1.3 <form>标签的属性 1.4 表单的同步提交及缺点二.通过ajax提交表单数据 ...
Form表单及模板引擎
Form表单及模板引擎什么是Form表单 Form表单的一些属性表单的同步提交及优缺点通过Ajax提交表单数据 JQuery的监听表单提交事件取消表单默认提交行为快速获取表单中的数据模板引 ...
前后端交互之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提 ...
【前端】Ajax-form表单与模板引擎
目录一.form表单的基本使用 1.1什么是表单 1.2表单的组成部分 1.3form标签属性 1.4表单的同步提交及缺点 1.4.1什么是表单的同步提交 1.4.2表单同步提交的缺点 1.4.3如 ...
前后端交互之使用ajax方法实现form表单的提交
转载于:使用ajax方法实现form表单的提交 - 程序员十三 - 博客园 (cnblogs.com) οnsubmit="reutrn false":表示禁止表单提交. dat ...
python中前后端通信方法Ajax和ORM映射（form表单提交）
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show():# 获取数据库所有文章数据,得到一个个对象res=A ...

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

form表单

基础知识

概念

组成

常用属性

表单同步提交

概念

缺点

表单事件监听

submit监听方式

on监听方式

阻止表单默认行为

serialize 快速获取表单提交的数据

模板引擎

基础知识

概念

优点

art-template模板引擎

使用

标准语法

前后端交互：form表单与模板引擎相关推荐

最新文章

热门文章