form表单与模板引擎

一、form表单的基本使用
- 1.1 什么是表单
- 1.2 表单的组成部分
- 1.3 <form>标签的属性
- 1.4 表单的同步提交及缺点
二、通过ajax提交表单数据
- 2.1 监听表单提交事件
- 2.2 阻止表单默认提交行为
- 2.3 快速获取表单中的数据serialize
三、案例-评论列表
四、模板引擎的基本概念
- 4.1 渲染UI结构时遇到的问题
- 4.2 什么是模板引擎
- 4.3 模板引擎的好处
五、art-template模板引擎
- 5.1 art-template简介
- 5.2 art-template的安装
- 5.3 art-template模板引擎的基本使用
- 5.4 art-template标准语法
六、模板引擎的实现原理
- 6.1 正则与字符串操作
- 6.2 实现简易的模板引擎

一、form表单的基本使用

1.1 什么是表单

☀️

表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理。

1.2 表单的组成部分

1.3 标签的属性

  <form action="/login" target="_blank" method="post"><input type="text" name="email_or_mobile" /><input type="password" name="password" /><button type="submit">提交</button></form>

1.4 表单的同步提交及缺点

  <form action="/login" target="_blank" method="post"><input type="text" name="email_or_mobile" /><input type="password" name="password" /><button type="submit">提交</button></form>

二、通过ajax提交表单数据

2.1 监听表单提交事件

☀️

  <form action="/login" id="f1"><input type="text" name="user_name" /><input type="password" name="password" /><button type="submit">提交</button></form><script>$(function () {// 第一种方式// $('#f1').submit(function () {//   alert('监听到了表单的提交事件')// })// 第二种方式$('#f1').on('submit', function () {  alert('监听到了表单的提交事件2')})})</script>

2.2 阻止表单默认提交行为

  <form action="/login" id="f1"><input type="text" name="user_name" /><input type="password" name="password" /><button type="submit">提交</button></form><script>$(function () {// 第一种方式// $('#f1').submit(function () {//   alert('监听到了表单的提交事件')// })// 第二种方式$('#f1').on('submit', function () {  alert('监听到了表单的提交事件2')})})</script>

2.3 快速获取表单中的数据serialize

  <form action="/login" id="f1"><input type="text" name="user_name" /><input type="password" name="password" /><button type="submit">提交</button></form><script>$(function () {// 第一种方式// $('#f1').submit(function (e) {//   alert('监听到了表单的提交事件')//   e.preventDefault()// })// 第二种方式$('#f1').on('submit', function (e) {  alert('监听到了表单的提交事件2')e.preventDefault()})})</script>

三、案例-评论列表

☀️

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./lib/bootstrap.css" /><script src="./lib/jquery.js"></script><script src="./js/cmt.js"></script>
</head><body style="padding: 15px;"><!-- 评论面板 --><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">发表评论</h3></div><form class="panel-body" id="formAddCmt"><div>评论人：</div><input type="text" class="form-control" name="username" autocomplete="off" /><div>评论内容：</div><textarea class="form-control" name="content"></textarea><button type="submit" class="btn btn-primary">发表评论</button></form></div><!-- 评论列表 --><ul class="list-group" id="cmt-list"><li class="list-group-item"><span class="badge" style="background-color: #F0AD4E;">评论时间：</span><span class="badge" style="background-color: #5BC0DE;">评论人：</span></li></ul></body></html>

四、模板引擎的基本概念

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

☀️

4.2 什么是模板引擎

4.3 模板引擎的好处

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

五、art-template模板引擎

5.1 art-template简介

☀️

art-template 是一个简约、超快的模板引擎。中文官网首页为
art-template地址

5.2 art-template的安装

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

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

5.4 art-template标准语法

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

传统方式渲染UI结构

  <div id="title"></div><div>姓名：<span id="name"></span></div><div>年龄：<span id="age"></span></div><div>会员：<span id="isVIP"></span></div><div>注册时间：<span id="regTime"></span></div><div>爱好：<ul id="hobby"><li>爱好1</li><li>爱好2</li></ul></div><script>var data = {title: '<h3>用户信息</h3>',name: 'zs',age: 20,isVIP: true,regTime: new Date(),hobby: ['吃饭', '睡觉', '打豆豆']}$(function () {$('#name').html(data.name)$('#title').html(data.title)$('#age').html(data.age)$('#isVIP').html(data.isVIP)$('#regTime').html(data.regTime)var rows = []$.each(data.hobby, function (i, item) {rows.push('<li>' + item + '</li>')})$('#hobby').html(rows.join(''))})</script>

模板

 <div id="title"></div><div>姓名：<span id="name"></span></div><div>年龄：<span id="age"></span></div><div>会员：<span id="isVIP"></span></div><div>注册时间：<span id="regTime"></span></div><div>爱好：<ul id="hobby"><li>爱好1</li><li>爱好2</li></ul></div><script>var data = {title: '<h3>用户信息</h3>',name: 'zs',age: 20,isVIP: true,regTime: new Date(),hobby: ['吃饭', '睡觉', '打豆豆']}$(function () {$('#name').html(data.name)$('#title').html(data.title)$('#age').html(data.age)$('#isVIP').html(data.isVIP)$('#regTime').html(data.regTime)var rows = []$.each(data.hobby, function (i, item) {rows.push('<li>' + item + '</li>')})$('#hobby').html(rows.join(''))})</script>

六、模板引擎的实现原理

6.1 正则与字符串操作

☀️

  <script>var str = 'hello'var pattern = /x/var result = pattern.exec(str)console.log(result)</script>

  <script>var str = 'hello'var pattern = /x/var result = pattern.exec(str)console.log(result)</script>

  <script>var str = '<div>我是{{name}}</div>'var pattern = /{{([a-zA-Z]+)}}/var result = pattern.exec(str)console.log(result)</script>

  <script>var str = '<div>我是{{name}}</div>'var pattern = /{{([a-zA-Z]+)}}/var patternResult = pattern.exec(str)// console.log(patternResult)str = str.replace(patternResult[0], patternResult[1])console.log(str)</script>

 <script>var str = '<div>{{name}}今年{{ age }}岁了</div>'var pattern = /{{\s*([a-zA-Z]+)\s*}}/// 第一次匹配var res1 = pattern.exec(str)str = str.replace(res1[0], res1[1])console.log(str)// 第二次匹配var res2 = pattern.exec(str)str = str.replace(res2[0], res2[1])console.log(str)// 第三次匹配var res3 = pattern.exec(str)console.log(res3)</script>

  <script>var str = '<div>{{name}}今年{{ age }}岁了</div>'var pattern = /{{\s*([a-zA-Z]+)\s*}}/var patternResult = nullwhile (patternResult = pattern.exec(str)) {str = str.replace(patternResult[0], patternResult[1])}console.log(str)</script>

6.2 实现简易的模板引擎

  <script>var data = { name: '张三', age: 20 }var str = '<div>{{name}}今年{{ age }}岁了</div>'var pattern = /{{\s*([a-zA-Z]+)\s*}}/var patternResult = nullwhile (patternResult = pattern.exec(str)) {str = str.replace(patternResult[0], data[patternResult[1]])}console.log(str)</script>

form表单与模板引擎相关推荐

前端_网页编程 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表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...
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提 ...
前后端交互：form表单与模板引擎
目录 form表单基础知识概念组成常用属性表单同步提交概念缺点表单事件监听 submit监听方式 on监听方式阻止表单默认行为 serialize 快速获取表单提交的数据模板引擎 ...
【前端】Ajax-form表单与模板引擎
目录一.form表单的基本使用 1.1什么是表单 1.2表单的组成部分 1.3form标签属性 1.4表单的同步提交及缺点 1.4.1什么是表单的同步提交 1.4.2表单同步提交的缺点 1.4.3如 ...
django之：网页伪静态 JsonResponse form表单携带文件数据 CBV源码分析模板语法传值模板语法之过滤器标签自定义标签函数过滤器、inclusion_tag模板的继承导入
目录标题一:网页伪静态 1.定义 2.如何实现二:视图层 1.视图函数返回值问题 2.视图层返回json格式的数据 3.form表单携带文件数据 4.CBV源码分析 1.CBV和FBV: 2.CB ...
java_web1:基本标签、form表单、frameset框架标签、CSS样式、javascript、servlet
前端三剑客: html,css,js(javascript) html: Hyper Text Markup Language:超文本标记语言针对字体,图片,视频,音频等等进行操作,设置字体颜色,大 ...

form表单与模板引擎

form表单与模板引擎

一、form表单的基本使用

1.1 什么是表单

1.2 表单的组成部分

1.3 标签的属性

1.4 表单的同步提交及缺点

二、通过ajax提交表单数据

2.1 监听表单提交事件

2.2 阻止表单默认提交行为

2.3 快速获取表单中的数据serialize

三、案例-评论列表

四、模板引擎的基本概念

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

4.2 什么是模板引擎

4.3 模板引擎的好处

五、art-template模板引擎

5.1 art-template简介

5.2 art-template的安装

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

5.4 art-template标准语法

六、模板引擎的实现原理

6.1 正则与字符串操作

6.2 实现简易的模板引擎

form表单与模板引擎相关推荐

最新文章

热门文章