Ajax-模板引擎、案例（郵箱唯一性、搜索框內容自動提示、三級聯動）、FormData（FormData使用、實例方法、二進制文件上傳）

模板引擎的使用

作用：使用模板引擎提供的模板語法，可以將數據和 HTML 拼接起來。

使用步驟

<body>
<div id="container">123</div>
</body>
<!-- 1、將模板引擎的庫文件引入到當前頁面 -->
<script src="/js/template-web.js"></script>

<!-- 2、準備art-template模板、並且進行模板拼接 -->
<script type="text/html" id="tp1">
<h1>{{username}}{{age}}</h1>
</script>

<script type="text/javascript">
//3、匹配模板與數據拼接
var html = template('tp1', { username: 'xiaoli', age: 18 });

//4、把拼接好的html字符串傳給獲取的元素
document.querySelector('#container').innerHTML = html;
console.log(html);

</script>

案例

驗證郵箱地址唯一性

<script>
	<div class="container">
		<div class="form-group">
			<label>郵箱地址</label>
			<input type="email" class="form-control" placeholder="請輸入郵箱地址" id="email">
		</div>
		<!-- 錯誤 bg-danger 正確 bg-success -->
		<p id="info"></p>
	</div>
	<script src="/js/ajax.js"></script>
   //1、獲取文本框併爲其添加離開焦點事件
		//獲取元素
		var emailInp=document.querySelector('#email');
		var info=document.querySelector('#info');
    //2、離開焦點時，檢測用戶輸入的郵箱地址是否符合規則
		  //提交文本框離開焦點事件onblur
		  emailInp.onblur=function(){
			  //獲取用戶輸入的郵箱地址
			var email=this.value;
			//郵箱正則驗證
			var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
			  
	 //3、如果不符合規則，阻止程序向下執行並給出提示信息
			//如果輸入的郵箱地址符合規則
			if(!reg.test(email)){
				info.innerHTML='請輸入符合規則的郵箱';
				//改爲提示信息的樣式
				info.className='bg-danger'
				  //阻止程序向下執行
				  return; 
                    
			}
	//4、向服務器端發送請求，檢測郵箱地址是否被別人註冊		
	//5、根據服務器端返回值決定客戶端顯示何種提示信息
			//向服務器端發送請求
			ajax({
				type:'get',
				url:'http://localhost:3000/verifyEmailAdress',
				data:{
					email:email
				},
				//符合規則
				success:function(result){
					console.log(result);
					info.innerHTML=result.message;
					info.className='bg-success';
					
				},
				//通過狀態碼判斷不符合規則進入到錯誤
				error:function(result){
					console.log(result);
					//錯誤信息
					info.innerHTML=result.message;
					info.className='bg-danger';
				}
			});
		}

	</script>

搜索框內容自動提示

<body>
	<div class="container">
		<div class="form-group">
			<input type="text" class="form-control" placeholder="請輸入搜索關鍵字" id="search">
			<ul class="list-group" id="list-box">

			</ul>
		</div>
	</div>
	<script src="/js/template-web.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/html" id="tpl">
		{{each result}}
			<li class="list-group-item">{{$value}}</li>
		{{/each}}
	</script>
	<script>
		//獲取元素 
		var searchInp = document.querySelector('#search');
		//獲取提示文字的存放位置
		var listBox = document.querySelector('#list-box');
		//存儲定時器的變量
		var timer = null;
		<!--1、獲取搜索框併爲其添加用戶輸入事件-->
		//用戶輸入事件(文本框的值改變時觸發)
		searchInp.oninput = function () {
			//獲取表單值停止發送請求
			clearTimeout(timer);
			//獲取用戶輸入的內容
			  <!--2、獲取用戶輸入的關鍵字-->
			var key = this.value;
			
			if(key.trim().length==0){
				//內容爲空阻止程序向下執行
				listBox.style.display='none';
				return;
			}
			//先服務器端發送請求
			//需要服務器返回與用戶輸入內容相關的值
			<!--5、爲了避免請求發送過於頻繁需要添加定時器-->
		      timer = setTimeout(function () {
		      <!--3、向服務器端發送請求並攜帶關鍵字作爲請求參數-->
				ajax({
					type: 'get',
					url: 'http://localhost:3000/searchAutoPrompt',
					data: {
						key: key
					},
					<!--4、將響應數據顯示在搜索框底部-->
					success: function (result) {
						//使用模板引擎拼接字符串
						var html = template('tpl', { result: result });
						//將拼接好的字符串形式在頁面中
						listBox.innerHTML = html;
						//顯示ul容器
						listBox.style.display = 'block';
					}
				})
			}, 800)

		}
	</script>
</body>

省市區三級聯動

     //模板、其他一樣
	<script type="type/text" id="provincetpl">
	  <!-- 省份模板 -->
	<option value="">請選擇省份</option>
	{{each province}}
	<option value="{{$value.id}}">{{$value.name}}</option>
	{{/each}}
	
	</script>
		<script>
		<!-- 2、獲取元素-->
		var province = document.querySelector("#province");
		//城市
		var city = document.querySelector("#city");
		//縣城
		var area = document.querySelector("#area");

		//請求信息
		<!--1、通過接口獲取省份信息-->
		ajax({
			type: 'get',
			url: 'http://localhost:3000/province',
			success: function (data) {
			<!--3、將服務器端返回的省份信息顯示在下拉框中-->
				//console.log(data);
				//拼接模板
				var html = template('provincetpl', { province: data })
				//渲染頁面
				province.innerHTML = html;
			}
		})
		<!--4、省份的下拉框添加值改變的事件-->
		province.onchange = function () {
		<!--5、當用戶選擇省份時，根據省份id獲取城市信息-->
			//獲取省份id
			var pid = this.value;
			//清空縣城下拉框的數據
			var html = template('areatpl', { area: [] })
			//渲染頁面
			area.innerHTML = html;

			ajax({
				type: 'get',
				url: 'http://localhost:3000/cities',
				data: {
					id: pid
				},
				success: function (data) {
					console.log(data);
					//拼接模板
					var html = template('citytpl', { city: data })
					//渲染頁面
					city.innerHTML = html;
				}
			})
		}
        <!--6、當用戶選擇城市時，根據城市id獲取縣城信息-->
		//城市的下拉框添加值改變的事件
		city.onchange = function () {
			//獲取省份id
			var cid = this.value;

			ajax({
				type: 'get',
				url: 'http://localhost:3000/areas',
				data: {
					id: cid
				},
				success: function (data) {
					console.log(data);
					//拼接模板
					var html = template('areatpl', { area: data })
					//渲染頁面
					area.innerHTML = html;
				}
			})
		}

	</script>

FormData(表單對象)

FormData() 對象的作用

模擬HTML表單，相當於將HTML表單映射成表單對象，自動將表單對象中的數據拼接成請求參數的格式。
異步上傳二進制文件

FormData() 對象的使用
	<!-- 1、創建普通的html表單 -->
	<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="button" id="btn" value="提交">
	</form>
<script type="text/javascript">
		//獲取元素
		var btn = document.querySelector('#btn');
		//獲取表單
		var from =document.querySelector('#form');
		//點擊事件
		btn.onclick=function(){
			<!--2、將普通表單轉化爲表單對象 不需要表單提交地址 不需要提交按鈕 一定要有name屬性-->
			var  formData=new FormData(form);

			//創建ajax對象
			var xhr=new XMLHttpRequest();
			//進行配置
			xhr.open('post','http://localhost:3000/formData');
			<!--3、提交表單對象-->
			//發送請求
			xhr.send(formData);
			//監聽請求成功後的響應事件
			xhr.onload=function(){
				if(xhr.status==200){
					//打印服務器響應的值
					console.log(xhr.responseText);
					
				}
			}
		}

	</script>

//服務端路由
//創建路由
app.post('/formData',(req,res)=>{
	//創建formidable表單解析對象
	const form=new formidable.IncomingForm();
	//解析客戶端傳遞過來的fromData對象
	  form.parse(req,(err,fields,files)=>{
		  res.send(fields);
	  })
})

注意

Formdata 對象不能用於 get 請求，因爲對象需要被傳遞到 send 方法中，而 get 請求方式的請求參數只能放在請求地址的後面。

服務器端 bodyParser 模塊不能解析 formData 對象表單數據，我們需要使用formidable模塊進行解析。

FormData 對象的實例方法

1. 獲取表單對象中屬性的值
        formData.get('key');
2. 設置表單對象中屬性的值
       formData.set('key', 'value');
3. 刪除表單對象中屬性的值
       formData.delete('key');
4. 向表單對象中追加屬性值
       formData.append('key', 'value');
   注意：set 方法與 append 方法的區別是，
   在屬性名已存在的情況下，set 會覆蓋已有鍵名的值，append會保留兩個值。

FormData 二進制文件上傳

	<script type="text/javascript">
		//獲取文件選擇控件
		var file = document.querySelector('#file');
		//獲取進度條元素
		var bar = document.querySelector('#bar');
		//獲取圖片的容器
		var box = document.querySelector('#box');
		//爲文件選擇控件添加onchanges事件
		//在用戶選擇文件時觸發
	    //二進制文件上傳
		file.onchange = function () {
			//創建空的fromData表單對象
			var formData = new FormData();
			//將用戶選擇的文件追加到formData表單對象中 
			formData.append('attrName', this.files[0]);
			//創建ajax對象
			var xhr = new XMLHttpRequest();
			//對ajax對象進行配置
			xhr.open('post', 'http://localhost:3000/upload');

			//在文件上傳的過程中持續觸發事件
			//文件上傳進度
			xhr.upload.onprogress = function (ev) {
				//監聽
				//console.log(ev);
				//ev.loaded 當前文件上傳了多少
				//ev.total 文件上傳的總大小
				var result = (ev.loaded / ev.total).toFixed(2) * 100 + '%';
				//設置進度條的寬度
				bar.style.width = result;
				//將百分比顯示在進度條中
				bar.innerHTML = result;


			}
			//發送ajax請求
			xhr.send(formData);
			//監聽服務器端響應給客戶端的數據
			//在我們將圖片上傳到服務器端以後，服務器端通常都會將圖片地址做爲響應數據傳遞到客戶端，
			//客戶端可以從響應數據中獲取圖片地址，然後將圖片再顯示在頁面中。
			//圖片即時預覽
			xhr.onload = function () {
				//如果狀態碼200
				if (xhr.status == 200) {
					//打印服務端響應數據
					//console.log(xhr.responseText);
					//傳遞的字符串類型轉化爲對象類型
					var result = JSON.parse(xhr.responseText);
					console.log(result);
					
					//創建圖片元素
					var img = document.createElement('img');
					//給圖片標籤設置src屬性
					img.src = result.path;
					//圖片加載完響應
					img.onload=function(){
						//將圖片顯示在頁面中
						box.appendChild(img);
					}
				}
			}
		}




    //服務端路由
    // 實現文件上傳的路由
app.post('/upload', (req, res) => {
	//創建formidable表單解析對象
	const form=new formidable.IncomingForm();
	//設置客戶端上傳文件的存儲路徑
	form.uploadDir=path.join(__dirname,'public','uploads');
	//配置文件的後綴
	form.keepExtensions=true;
	//解析客戶端傳遞過來的fromData對象
	form.parse(req,(err,fields,files)=>{
		//響應客戶端傳遞過來的文件對象的文件地址
		res.send({
			path:files.attrName.path.split('public')[1]
		})
	  })
}); 
	</script>

Ajax-模板引擎、案例（郵箱唯一性、搜索框內容自動提示、三級聯動）、FormData（FormData使用、實例方法、二進制文件上傳）

模板引擎的使用

案例

FormData(表單對象)

Vue-基本使用、模板語法(插值表達式、指令、事件綁定、屬性綁定、樣式綁定、分支循環結構)

git與gitHub的使用

JS高級-類與對象

Javascript-API-DOM-操作元素對象的屬性、文本內容、子元素、樣式、事件

JS高級-函數定義與調用、函數內的this指向、改變this指向方法、閉包、遞歸、嚴格模式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結