form表单与模板引擎
2024-06-12 07:14:42
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:超文本标记语言 针对字体,图片,视频,音频等等进行操作,设置字体颜色,大 ...
最新文章
- flask 作为 three.js 的服务器
- Linux知识点记录
- Mysql事务处理问题
- IE下var丢失造成的错误
- python decimal_python学习笔记一
- 详解GaussDB(for MySQL)服务：复制策略与可用性分析
- 特斯拉卖保险会比卖车更赚钱吗？
- java适配器有哪些_Java中适配器模式（Adapter）是什么？ 适配器模式（详解）
- Python数据分析处理库——Pandas
- 笔记本Windows7系统安装教程
- distpicker.js 三级联动，修改地址时设置默认值
- hdu 6437 Videos 最小费用最大流
- PCM开发板模块实验指导--2.4G无线通讯模块NRF24L01实验
- Android学习--04（打地鼠小游戏App源码+提示框Toast+提示窗口Dialog+菜单Menu+下拉框Spinner）
- Android ADB常用指令
- android 一键连接wifi,还在一键连WiFi？快试试更智能的WLAN+
- Sentry开启 Github sso 配置(self-hosted)
- hutool 获取某月最后一天_Hutool使用指南
- 5700教程☆问题汇总
- Appium简介与原理