Ajax学习02-form表单与模板引擎
目录
- form表单的基本使用
-
-
- form标签属性
-
-
- action
- target
- method
- enctype
-
- 表单的同步提交
-
- 通过Ajax提交表单数据
- 模板引擎基本概念
-
-
- art-template模板引擎的使用
-
-
- art-template标准语法：{{}}
-
-
- 模板引擎实现原理
-
-
- 实现简易的模板引擎
-
form表单的基本使用
表单在网页中主要负责数据采集功能，通过< form >标签的提交操作把采集到的信息提交到服务器处理。
表单的三个基本组成部分：
1、表单标签。
2、表单域：包含了文本框，密码框，隐藏域，多行文本框，复选框，单选框，下拉选择框和文件上传框等。
3、表单按钮。
| 属性 | 值 | 描述 |
|---|---|---|
| action | URL地址 | 规定当提交表单时，向何处发表表单数据 |
| method | get或post | 规定以何种方式把表单数据提交到action URL |
| action | application/x-www-form-urlencoded, multipart/form-data, text/plain | 规定在发送表单数据之前如何对其进行编码 |
| target | _blank, _self, _parent, _top, framename | 规定在何处打开action URL |
form标签属性
action
用来规定当提交表单时，向何处发表表单数据。
action的值为后端提供的一个URL地址，这个URL地址专门负责接受表单提交过来的数据。
当form表单在未指定action属性值的情况下，action属性默认值为当前页面的URL地址。
提交表单后，页面会立即跳到action属性指定的URL地址。
<form action="/index.html">
form>
target
target属性用来规定在何处打开action URL,可选值有5个，默认值是_self，表示在相同框架中打开action URL。
| 值 | 描述 |
|---|---|
| _blank | 在新窗口打开 |
| _self | 默认，在相同的框架中打开 |
| _parent | 在在父框架集中打开 |
| _top | 在整个窗口中打开 |
| framename | 在指定的框架中打开 |
<form action="index.html" target="_blank">
form>
method
method属性用来规定以何种方式把表单数据提交到action URL，可选值有get和post，默认值为get。
get方式适合用来提交少量的、简单的数据。
post方式适合用来提交少量的、复杂的、或包括文件上传的数据。
enctype
用来规定在发送表单数据之前如何对数据进行编码。
| 值 | 描述 |
|---|---|
| application/x-www-form-urlencoded | 默认，在发送前编码所有字符 |
| multipart/form-data | 不对字符编码，在使用包含文件上传控件的表单时，必须使用这个值 |
| text/plain | 空格转换为“+”，但不对特殊字符编码 |
表单的同步提交
通过点击submit按钮，触发表单提交操作，使页面跳转到action URL的行为，叫做表单的同步提交。
缺点：
1、提交后页面会跳转；
2、提交后页面之前的状态和数据会丢失；
解决：
表单只负责采集数据，Ajax负责将数据提交到服务器。
通过Ajax提交表单数据
阻止表单的提交和页面的跳转
<form action="index.html">
<button type="submit">提交button>
form>
<script>
var form=document.querySelector('form');
form.addEventListener('submit',function(e){
e.preventDefault();
})
script>
快速获取表单中的数据
<form action="index.html" id="form1">
<input type="text" name="username" id="uname" value="" />
<input type="password" name="password" id="pass" value="" />
<button type="submit">提交button>
form>
<script>
function formser(form) {
var arr = {};
for (var i = 0; i < form.children.length; i++) {
var feled = form.children[i];
switch (feled.type) {
case undefined:
case 'button':
case 'file':
case 'reset':
case 'submit':
break;
case 'checkbox':
case 'radio':
if (!feled.checked) {
break;
}
default:
if (arr[feled.name]) {
arr[feled.name] = arr[feled.name] + ',' + feled.value;
} else {
arr[feled.name] = feled.value;
}
}
}
return arr
}
var form = document.querySelector('form')
form.addEventListener('submit', function(e) {
e.preventDefault()
var arr = formser(form)
console.log(arr) //{username: 'xiaoming', password: '12'}
})
script>
<script>
$(document).ready(function(){
$("#form1").on('submit',function(e){
e.preventDefault();
var data=$("#form1").serialize(); //usename=xiaoming&password=12
});
});
script>
模板引擎基本概念
渲染UI结构时用到的字符串拼接方法，如果渲染的UI结构比较复杂，包含引号等问题，会非常麻烦
<script>
var div=document.getElementById('div');
var data={
title:'文章标题',
content:'这是文章标题'
}
div.innerHTML=''
+data.title+''
+data.content+'';
script>
模板引擎：根据指定的模板结构和数据，自动生成一个完整的HTML页面。
模板引擎减少了字符串的拼接操作，使代码结构更清晰，易于维护和阅读。
art-template模板引擎的使用
//引入js文件
<script src="js/template-web.js">script>
//定义模板
<script id="tpl-user" type="text/html">
<h2>{{name}}</h2>
<h2>{{age}}</h2>
script>
//定义数据，调用template函数，渲染页面结构
<script>
var user={
name:'xiaoming',
age:10
}
var htmlStr=template('tpl-user',user);
console.log(htmlStr);
var div=document.getElementById('div');
div.innerHTML=htmlStr;
script>
art-template标准语法：{{}}
{{}}内可以进行变量输出，循环数组，对象的属性输出，三元表达式输出，逻辑或输出，加减乘除等表达式输出等。
{{value}}
{{obj.key}}
{{obj['key']}}
{{a?b:c}}
{{a||b}}
{{a+b}}
原文输出：输出的value值中包含了HTML标签结构，需要使用原文输出
{{@ value}}
条件输出：可以在{{}}中使用if…else if…/if的方式按需要输出。
{{if value > 2}}
<h1>{{value}}h1>
{{else if value == 2}}
<h1>{{value + 2}}h1>
{{else}}
<h1>{{value * 2}}<h1>
{{/if}}
循环输出：在{{}}中使用each进行循环，当前循环的索引使用$ index，当前循环的值使用$ value进行访问。
{{each arr}}
{{$index}}{{$value}}
{{/each}}
过滤器：本质是一个function处理函数。上一个输出作为下一个输入。
{{value | filterName}}
template.default.imports.filterName=function(value){return 处理的结果} //一定有一个return的值
<div>注册时间：{{regTime | dataFormat}}div>
//定义的过滤器一定在script内语句的最前面
template.default.imports.dataFormat=function(data){
var y=dataa.getFullYear();
var m=data.getMonth()+1;
var d=data.getDate();
return y+'-'+m+'-'+d;
}
模板引擎实现原理
正则字符串操作，循环replace {{}}里的值
<script>
var str='{{name}}今年{{age}}岁';
var pattern=/{{\s*([a-zA-Z]+)\s*}}/;
var patternResult=null;
while(patternResult=pattern.exec(str)){
str=str.replace(patternResult[0],patternResult[1]);
}
console.log(str); //name今年age岁
script>
replace替换为数据真值
<script>
var data={
name:'xiaoming',
age:10
}
var str='{{name}}今年{{age}}岁';
var pattern=/{{\s*([a-zA-Z]+)\s*}}/;
var patternResult=null;
while(patternResult=pattern.exec(str)){
str=str.replace(patternResult[0],data[patternResult[1]]);
}
console.log(str); //xiaoming今年10岁
script>
实现简易的模板引擎
1、定义模板结构
2、预调用模板引擎
3、封装template函数
4、导入并使用自定义的模板引擎
<script id="tpl-user" type="text/html">
<div>{{name}}</div>
<div>{{ age}}</div>
<div>{{sex }}</div>
<div>{{ address }}</div>
script>
<script>
function template(id,data){
var str=document.getElementById(id).innerHTML;
var pattern=/{{\s*([a-zA-Z]+)\s*}}/;
var patternResult=null;
while(patternResult=pattern.exec(str)){
str=str.replace(patternResult[0],data[patternResult[1]]);
}
return str;
}
var data={
name:'xiaoming',
age:10,
sex:'male',
address:'place'
}
var htmlStr=template('tpl-user',data);
document.getElementById('user-box').innerHTML=htmlStr;
script>