Ajax学习02-form表单与模板引擎

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='<h1>'+data.title+'</h1><p>'+data.content+'</p>';
</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='<div>{{name}}今年{{age}}岁</div>';
			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);   //<div>name今年age岁</div>
</script>

replace替换为数据真值

<script>
		var data={
			name:'xiaoming',
			age:10
		}
			var str='<div>{{name}}今年{{age}}岁</div>';
			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);   //<div>xiaoming今年10岁</div>
</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>