前后端交互之form表单和模板引擎
目录
一、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.定义延时器ID
var 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>