脚本宝典收集整理的这篇文章主要介绍了前后端交互:form表单与模板引擎,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目录
form表单
基础知识
概念
组成
常用属性
表单同步提交
概念
缺点
表单事件监听
submit监听方式
on监听方式
阻止表单默认行为
serialize 快速获取表单提交的数据
模板引擎
基础知识
概念
优点
art-template模板引擎
使用
标准语法
<form> 标签用于为用户输入创建 HTML 表单,表单用于向服务器传输数据。
action :提交表单时,向何处发送表单
target:规定在何处打开action URL
method:规定何种方式把表单提交到 action URL
enctype:规定发送表单数据之前如何对数据进行编码
触发提交按钮 让页面发生跳转到 action URL的行为。表单具有默认的提交行为,默认是同步的。form标签内部的 action 和 method 属性就是用来编写同步的提交行为,同步表单提交,浏览器会直接将服务器响应的内容渲染到页面上。
<form action="./index.html" method="post">
<input type="submit" value="">
</form>
<script>
$("form").submit(function (e) {
console.log('submit监听表单事件');
})
</script>
<form action="./index.html" method="post">
<input type="submit" value="">
</form>
<script>
$("form").on('submit', function (e) {
console.log('on 监听表单事件');
})
</script>
<form action="./index.html" method="post">
<input type="submit" value="">
</form>
<script>
$("form").on('submit', function (e) {
e.preventDefault();//阻止表单默认提交行为
})
没有name属性的表单元素是无法获取的!
<form id="form1">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit"> 提交</button>
</form>
<script>
$('#form1').serialize();
//调用的结果:
// username = 用户名的值 & password = 密码的值
</script>
模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。
代码结构:
<body>
<!-- 1. 导入art-template -->
<script src="./template-web.js"></script>
<script src="./jQuery.min.js"></script>
<div id="container">我是容器 我用来装渲染好的结构</div>
<!-- 3.定义模板 -->
<script type="text/html" id="tpl">
<h1>{{name}}----{{age}}</h1>
</script>
<script>
//2.定义数据
var data = { name: 'zs', age: 20 };
//4.调用template函数
var htmlstr = template('tpl', data);
//5.渲染HTML结构
$("#container").html(htmlstr);
</script>
</body>
效果展示:
<script type="text/html">
{{if value}}输出内容{{/if}}
{{if value1}}输出内容1
{{else if value2}}输出内容2
{{/if}}
</script>
<script type="text/html">
{{each arr}}
{{$index}} {{$value}}
{{/each}}
</script>
<script type="text/html">
<div>注册时间:{{regTime | dataFormat}}</div>
</script>
<script>
template.defaults.imports.dataFormat = function (dates) {
var date = new Date(dates);
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var h = date.getHours();
var mi = date.getMinutes();
var s = date.getSeconds();
m = m > 9 ? m : "0" + m;
d = d > 9 ? d : "0" + d;
h = h > 9 ? h : "0" + h;
mi = mi > 9 ? mi : "0" + mi;
s = s > 9 ? s : "0" + s;
return `${y}-${m}-${d} ${h}:${mi}:${s}`;
}
</script>
<script>
//查询时候含有该字符串 有返回匹配值 没有返回null
var str = 'hello';
var pattern1 = /o/;
var pattern2 = /m/;
// 输出的结果为一个数组["o", index: 4, input: "hel1o", groups: undefined]
console.log(pattern1.exec(str));
//无法匹配返回 null
console.log(pattern2.exec(str));
</script>
<script>
var str = '<div>我是{{name}}</div>';
var pattern = /{{([a-zA-Z]+)}}/;
var patternResult = pattern.exec(str);
console.log(patternResult);
//得到name相关的分组信息
// ["{{name}}", "name", index: 7, input: "<div> 我是{{name}}</div>", groups: unde fined]
</script>
以上是脚本宝典为你收集整理的前后端交互:form表单与模板引擎全部内容,希望文章能够帮你解决前后端交互:form表单与模板引擎所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。