form表单与模板引擎
一、form表单的基本使用
1.1 表单的概念
表单在网页中主要负责数据采集功能 通过from功能 通过from标签提交操作
1.2 表单的组成部分
表单标签 <form>表单域: 包含文本框 密码框 隐藏域 多行文本框 复选框 单选框 文件上传框表单按钮 <button type="submit">
1.3 form标签的属性
用来规定如何把采集到的数据发送到服务器action(向何处发送表单数据) 默认为当前页面的url,当提交表单后,会立即跳转到action属性指定的url地址target属性用来规定在何处打开action url
method 以何种方式提交表单数据(get post)get提交少量简单的数据(默认值)post提交大量 复杂的 或包含文件上传的数据
enctype 规定在发送表单数据之前如何对数据进行编码
1.4 表单的同步提交和缺点
点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。
缺点
<form>表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。
<form>表单同步提交后，页面之前的状态和数据会丢失
解决表单同步提交的缺点
表单只负责采集数据 Ajax负责将数据提交到服务器
二、通过Ajax提交表单数据
2.1 监听表单提交事件
jQuery中有下边两种方式
//第一种方式
$('#f1').submit(function () {
alert('监听到表单的提交')
})
// 第二种方式
$('#f1').on('submit', function () {
alert('监听到了2')
})2.2 阻止表单默认提交行为
当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转
$(function () {
//第一种方式
$('#f1').submit(function (e) {
// 组织表单的提交和页面的跳转
alert('监听到表单的提交')
e.preventDefault()
})
// 第二种方式
// $('#f1').on('submit', function (e) {
// alert('监听到了2')
// 组织表单的提交和页面的跳转
// e.preventDefault()
// })
})2.3 快速获取表单中的数据
serialize()函数
一次性获取表单中的所有数据必须为每个表单元素添加name属性,且name不能重复
$(function () {
// 第一种方式
/* $('#f1').submit(function (e) {
e.preventDefault()
var data = $(this).serialize()
console.log(data)
}) */
// 第二种方式
$('#f1').on('submit', function (e) {
e.preventDefault()
var data = $('#f1').serialize()
console.log(data)
})
})三、评论列表案例
引入的库
<script src="./lib/jquery.js"></script>
<link rel="stylesheet" href="./lib/bootstrap.css">
<script src="./js/cmt.js"></script>html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="./lib/jquery.js"></script>
<link rel="stylesheet" href="./lib/bootstrap.css">
<script src="./js/cmt.js"></script>
<body style="margin: 15px;">
<!-- 评论面板 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">发表评论</h3>
</div>
<form class="panel-body" id="formAddcmt">
<div naem="">评论人：</div>
<input type="text" class="form-control" name="username">
<div naem="">评论内容：</div>
<textarea class="form-control" name="content"></textarea>
<button type="submit" class="btn btn-primary" naem="">发表评论</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>
</body>
</html>js部分
function getCommenrList(){
$.ajax({
method:'GET',
url:'https://ajax-base-api-t.itheima.net/api/cmtlist',
success:function(res){
console.log(res);
if(res.status!==200)return alert('获取评论列表失3败')
let rows=[]
$.each(res.data,function(i,item){
let 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(''))
}
})
}
getCommenrList()
$(function(){
$('#formAddcmt').submit(function(e){
e.preventDefault();
var data = $(this).serialize()
$.post('https://ajax-base-api-t.itheima.net/api/addcmt',data,function(res){
if(res.status!==201)return alert('发表评论失败')
getCommenrList()
})
})
})
五、art-template模板引擎
5.1 art-template简介
5.2安装
5.3 使用步骤
<!-- 1. 导入模板引擎 -->
<!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
<script src="./lib/template-web.js"></script> var data = {
title: '<h3>用户信息</h3>',
name: 'zs',
age: 20,
isVIP: true,
regTime: new Date(),
hobby: ['吃饭', '睡觉', '打豆豆']
} <!-- 3.定义模板-->
<!-- 3.1模板的HTML结构，必须定义到script中 -->
<script type="text/html" id="tpl-user">
<h1>{{name}}-------{{age}}</h1>
{{@ test }}
<div> // 4.调用template函数
let htmlStr = template('tpl-user', data)
console.log(htmlStr); // 4.调用template函数
let htmlStr = template('tpl-user', data)
console.log(htmlStr);
// 5.渲染HTML结构
$('#container').html(htmlStr)5.4 标准语法
<div>
{{if flag===0}}
falg的值是0
{{else if flag===1}}
falg的值是1
{{/if}}
</div> 循环输出{{ }} 内，通过 each 语法循环数组
当前的循环项使用 $value
{{each hobby}}
<li>索引是:{{$index}},循环项是:{{$value}}</li>
{{/each}}-
[官网地址](http://aui.github.io/art-template/zh-cn/)
导入art-template
定义数据
定义模板
调用template函数
渲染HTML结构
{{ }}内可进行变量输出 或 循环数组{{ }}语法中可进行变量的输出 对象属性的输出 三元表达式输出 逻辑输出 加减乘除表达式的输出
原文输出 {{@ value}}如果输出的value值中 包含html标签,则需要使用原文输出
条件输出{{}} 中使用if...else if...if
当前循环的索引使用 $inde
六、模板引擎的实现原理
exec()函数用于检索字符串中的正则表达式的匹配
如果字符串中有匹配的值 则返回该匹配值,否则返回null
let str = 'hello'
let arr = /o/
console.log(arr.exec(str));分组
正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容
6.2 实现简易的模板引擎
1.定义模板结构
<script type="text/html" id="box">
<div>姓名:{{name}}</div>
<div>年龄:{{age}}</div>
<div>性别:{{gender}}</div>
</script>
2.预调用模板引擎
//定义数据
let data = {
name: '张三',
age: 28,
gender: '男'
}
//调用模板引擎
let htmlStr = template('#box', data)
3.封装template函数
//封装template函数
function template(id, data) {
console.log('id', id, data);
let str = document.querySelector(id).innerHTML
console.log(str);
let partern = /{{\s*([a-zA-Z]+)\s*}}/
let Result = null
while (Result = partern.exec(str)) {
str = str.replace(Result[0], data[Result[1]])
}
return str
}
4.导入并使用自定义的模板引擎
<script src="./15-template.js"></script>
//渲染模板引擎
let div = document.querySelector('#div')
div.innerHTML = htmlStr
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
