一、Form表单

1.1 标签属性

1.1.1 action

1.1.2 target

1.1.3 method

1.1.4 enctype

1.2 表单的同步提交及缺点

1.3 通过Ajax提交表单数据

1.3.1 监听表单提交事件

1.3.2 阻止表单的默认行为

1.4 serialize()方法

二、模板引擎

2.1 art-template使用步骤

2.2 art-template标准语法

2.3 正则与字符串操作

一、Form表单

在网页中主要负责数据采集功能。由表单标签、表单域、表单按钮组成。

1.1 标签属性

用来规定如何把采集到的数据发送到服务器。

1.1.1 action

action属性值应该是后端提供的一个URL地址。

当<form>表单在未指定action属性值得情况下，action的默认值为当前页面的URL地址。

当提交表单后，页面会立即跳转到action属性指定的URL地址。

1.1.2 target

1.1.3 method

规定以何种方式把把表单数据提交到action URL。

get ：适合提交少量的简单的数据，url地址中会显示数据

post ：适合提交大量复杂或包含文件上传的数据,url地址中不会显示数据，安全性高

1.1.4 enctype

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

1.2 表单的同步提交及缺点

表单的同步提交：通过点击submut按钮，触发表单提交的操作，从而使页面跳转到aciton URL的行为。

缺点:整个页面会发生跳转，跳转到action URL所指向的地址，用户体验感差。页面之前的状态和数据会丢失。

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

1.3 通过Ajax提交表单数据

1.3.1 监听表单提交事件

$('表单名').submit(function (e) {}；

$('表单名').on('submit', function(e) {}；

1.3.2 阻止表单的默认行为

e.preventDefault();

1.4 serialize()方法

格式：$(selector).serialize();

快速获取表单数据;必须为每个表单元素添加name属性

案例展示

效果图：

代码展示：（html+js）

<!-- 评论面板 -->
<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> Item 1</li>
</ul>

function getCommentList() {$.ajax({method: 'GET',url: 'http://www.liulongbin.top:3006/api/cmtlist',data: {},success: function(res) {if (res.status !== 200) return alert('获取评论列表失败！');// console.log('获取数据成功');var rows = [];$.each(res.data, function(i, item) { //循环拼接字符串var str = '<li class="list-group-item"><span class="badge" style="background-color: #F0AD4E;">评论时间：' + item.time + '</span><span class="badge" style="background-color: #5BC0DE;">评论人：' + item.username + '</span>' + item.content + '</li>';rows.push(str);})$('#cmt-list').empty().append(rows.join(''))}});
};
getCommentList();$(function() {$("#formAddCmt").submit(function(e) {e.preventDefault();var data = $(this).serialize();console.log(data);$.post('http://www.liulongbin.top:3006/api/addcmt', data, function(res) {if (res.status !== 201) {return alert('发表评论失败！')}getCommentList();$('#formAddCmt')[0].reset();});});});

二、模板引擎

根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。

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

2.1 art-template使用步骤

导入模板引擎：template-web.js

渲染函数（定义数据）

模板的html必须定义到script（定义模板）

调用 template函数

渲染HTML结构

2.2 art-template标准语法

标准语法：在{{}}内可以进行变量输出或循环数组等操作
原文输出
   {{@ value}}
条件输出
   {{if v1}} 输出内容 {{else if v2}} 输出内容 {{/if}}
   {{if value}}输出内容{{/if}}
循环输出
   {{each arr}} {{$index}},{{$value}} {{/each}}

2.3 正则与字符串操作

exec()函数
   用于检索字符串中的正则表达式的匹配
存在返回匹配值，匹配失败返回null
提取分组
   正则表达式中()包起来的内容表示一个分组，可以通过分组来提取自己想要的内容
replace()函数
   字符串的replace操作str.replace(被替代的元素, 替代元素]);

综合案例

效果图：

导入相关文件

代码展示：（html+js）

 <div class="container"><!-- Logo --><img src="./images/taobao_logo.png" alt="" class="logo" /><div class="box"><!-- tab 栏 --><div class="tabs"><div class="tab-active">宝贝</div><div>店铺</div></div><!-- 搜索区域（搜索框和搜索按钮） --><div class="search-box"><input id="ipt" type="text" class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">搜索</button></div><!-- 搜索建议列表 --><div id="suggest-list"></div></div></div>

 <script type="text/html" id="tpl-suggestList">{{each result}}<!-- 搜索建议项 --><div class="suggest-item">{{$value[0]}}</div>{{/each}}</script>

<script>$(function() {//1.定义延时器IDvar timer = null;//(1)定义全局缓存对象var cacheobj = {}//2.定义防抖的函数function debounceSearch(kw) {timer = setTimeout(function() {getSuggestList(kw);}, 800)}//为输入框绑定keyup事件$('#ipt').on('keyup', function() {//3.清楚延时器clearTimeout(timer);//trim去除空格var keywords = $(this).val().trim();if (keywords.length <= 0) {return $('#suggest-list').empty().hide();}//先判断缓存中是否有数据 if (cacheobj[keywords]) {return renderSuggestList(cacheobj[keywords]);}//输入后调用debounceSearch(keywords);});function getSuggestList(kw) {$.ajax({url: 'https://suggest.taobao.com/sug?q=' + kw,dataType: 'jsonp',success: function(res) {renderSuggestList(res);}})};//渲染建议列表function renderSuggestList(res) {if (res.result.length <= 0) {return $('#suggest-list').empty().hide();}var htmlStr = template('tpl-suggestList', res);$('#suggest-list').html(htmlStr).show();//(2)将搜索结果保存到缓存对象中//获取用户输入内容，当作键var k = $('#ipt').val().trim();//需要将数据作为值，进行缓存cacheobj[k] = res;}})
</script>

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

前后端交互：form表单与模板引擎
目录 form表单基础知识概念组成常用属性表单同步提交概念缺点表单事件监听 submit监听方式 on监听方式阻止表单默认行为 serialize 快速获取表单提交的数据模板引擎 ...
前端_网页编程 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的监听表单提交事件取消表单默认提交行为快速获取表单中的数据模板引 ...
【前端】Ajax-form表单与模板引擎
目录一.form表单的基本使用 1.1什么是表单 1.2表单的组成部分 1.3form标签属性 1.4表单的同步提交及缺点 1.4.1什么是表单的同步提交 1.4.2表单同步提交的缺点 1.4.3如 ...
python中前后端通信方法Ajax和ORM映射（form表单提交）
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show():# 获取数据库所有文章数据,得到一个个对象res=A ...
Django之POST GET与前后端交互
Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...

前后端交互之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提交表单数据

1.3.1 监听表单提交事件

1.3.2 阻止表单的默认行为

1.4 serialize()方法

二、模板引擎

2.1 art-template使用步骤

2.2 art-template标准语法

2.3 正则与字符串操作

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

最新文章

热门文章