ajax快速入門

  • 2020 年 7 月 24 日
  • 筆記

一、ajax簡單入門

1.Ajax的實現步驟

// 1.創建ajax對象
var xhr = new XMLHttpRequest();
// 2.高數ajax請求地址及請求方式
//第一個參數就是請求方式，第二個參數是請求地址
xhr.open('get', '//www.baidu.com');
// 3.發送請求
xhr.send()
// 4.獲取服務端給客戶響應的數據
xhr.onload = function () {
    console.log(xhr.responseText)
}

2.處理後台返回的數據

由於用原生的ajax請求數據時，伺服器響應的數據要轉換為字元串。因此我們需要把返回的數據用JSON.parse()轉換為JSON對象

示例：

// 1.創建ajax對象
var xhr = new XMLHttpRequest()
// 2.告訴ajax對象要想哪發送請求，以什麼方式發送請求
xhr.open('get', '//localhost:3000/requestDate')
// 3.發送請求
xhr.send()
// 獲取服務端響應的數據
xhr.onload = function () {
    // 服務端給客戶端響應的JSON對象通過ajax傳遞時必須轉換為字元串類型
    // 通過JSON.parse()將字元串轉換為JSON對象
    var res = JSON.parser(xhr.responseText)
    console.log(res)
    // 將JSON對象與HTML進行拼接
    var str = '<h2>' + res.name + res.age + '</h2>'
    // 利用dom把html追加到也餓面當中即可
    document.body.innerHTML = str
}

3.傳遞get請求參數

使用ajax傳遞get請求參數我們需要手動拼接參數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <input type="text" id="username">
    </p>
    <p>
        <input type="text" id="age">
    </p>
    <p>
        <input type="button" value="提交" id="btn">
    </p>
    <script>
        //獲取元素
        var btn = document.getElementById('btn');
        var username = document.getElementById('username');
        var age = document.getElementById('age');
        //為按鈕添加點擊事件
        btn.onclick = function(){
            //創建ajax對象
            var xhr = new XMLHttpRequest();
            //獲取用戶在文本框輸入的值
            var nameValue = username.value;
            var ageValue = age.value;
            // alert(nameValue);
            // alert(ageValue);
            //使用ajax 發送get請求，我們要手動拼接get參數
            //拼接請求參數
            var params = 'username='+nameValue+'&age='+ageValue;
            //告訴ajax請求方式和請求的地址
            xhr.open('get','//localhost:3000/get?'+params);
            //發送請求
            xhr.send();
            //獲取伺服器響應的數據
            xhr.onload = function(){
                console.log(xhr.responseText);
                
            }
​
        }
    </script>
</body>
</html>

4.傳遞post請求參數

post請求需要設置請求參數格式的類型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <input type="text" id="username">
    </p>
    <p>
        <input type="text" id="age">
    </p>
    <p>
        <input type="button" value="提交" id="btn">
    </p>
    <script>
        //獲取元素
        var btn = document.getElementById('btn');
        var username = document.getElementById('username');
        var age = document.getElementById('age');
        //為按鈕添加點擊事件
        btn.onclick = function(){
            //創建ajax對象
            var xhr = new XMLHttpRequest();
            //獲取用戶在文本框輸入的值
            var nameValue = username.value;
            var ageValue = age.value;
            // alert(nameValue);
            // alert(ageValue);
            //拼接請求參數
            var params = 'username='+nameValue+'&age='+ageValue;
            //告訴ajax請求方式和請求的地址
            xhr.open('post','//localhost:3000/post');
            //設置請求權參數格式的類型，(post請求必須要設置)
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //發送請求
            xhr.send(params);
            //獲取伺服器響應的數據
            xhr.onload = function(){
                console.log(xhr.responseText);
                
            }
​
        }
    </script>
</body>
</html>

5.向伺服器端傳遞JSON格式的請求參數

通過設置setRequestHeader請求頭告訴伺服器客戶端向服務端傳遞的請求參數的格式是什麼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        // 1.創建ajax對象
        var xhr = new XMLHttpRequest();
        // 2.告訴Ajax對象要向哪發送請求，以什麼方式發送請求
        // 1)請求方式 2)請求地址
        xhr.open('post', '//localhost:3000/json');
        // 通過請求頭告訴伺服器端客戶端向伺服器端傳遞的請求參數的格式是什麼
        xhr.setRequestHeader('Content-Type', 'application/json');
        // 3.發送請求，格式只能是字元串，JSON.stringify() 將json對象轉換為json字元串
        xhr.send(JSON.stringify({name: 'lisi', age:50}));
        // 4.獲取伺服器端響應到客戶端的數據
        xhr.onload = function (){
            console.log(JSON.parse(xhr.responseText));
        }
    </script>
</body>
</html>

6.獲取伺服器端響應數據的另一種方式

各個階段readyState對應值的含義

readyState 0表示已經創建了ajax對象 但是還沒有對ajax對象進行配置
readyState 1表示已經對ajax對象進行配置 但是還沒有發送請求
readyState 2 請求已經發送了
readyState 3 已經接收到伺服器端的部分數據了
readyState 4 伺服器端的響應數據已經接收完成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var xhr = new XMLHttpRequest();
        // 0 已經創建了ajax對象 但是還沒有對ajax對象進行配置
        console.log(xhr.readyState);
        xhr.open('get', '//localhost:3000/readystate');
        // 1 已經對ajax對象進行配置 但是還沒有發送請求
        console.log(xhr.readyState);
​
        // 當ajax狀態碼發生變化的時候出發
        xhr.onreadystatechange = function() {
            // 2 請求已經發送了
            // 3 已經接收到伺服器端的部分數據了
            // 4 伺服器端的響應數據已經接收完成
            console.log(xhr.readyState);
            // 對ajax狀態碼進行判斷 如果狀態碼的值為4就代表數據已經接收完成了
            if (xhr.readyState == 4) {
                console.log(xhr.responseText);
            }
        } 
​
        xhr.send();
        
    </script>
</body>
</html>

7.Ajax錯誤處理

當xhr的http狀態碼為400就是請求失敗了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="btn">發送Ajax請求</button>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
​
        btn.onclick = function () {
            // 1.創建ajax對象
            var xhr = new XMLHttpRequest();
            // 2.告訴Ajax對象要向哪發送請求，以什麼方式發送請求
            // 1)請求方式 2)請求地址
            xhr.open('get', '//localhost:3000/error');
            // 3.發送請求
            xhr.send();
            // 4.獲取伺服器端響應到客戶端的數據
            xhr.onload = function (){
                console.log(xhr.responseText);
                //xhr.status獲取http狀態碼
                console.log(xhr.status);
                if(xhr.status == 400){
                    alert('出差錯啦！！！');
                }
            }
            //當網路中斷會觸發onerror事件
            xhr.onerror=function(){
                alert('網路中斷，無法發送Ajax請求');
            }
        }
​
        // Ajax狀態碼: 表示Ajax請求的過程狀態 ajax對象返回的
        // Http狀態碼: 表示請求的處理結果 是伺服器端返回的
    </script>
</body>
</html>

相關http狀態碼到的解釋

對網站管理工作者來說有個詞不陌生，HTTP狀態碼，它是用以表示網頁伺服器HTTP響應狀態的3位數字程式碼。狀態碼的第一個數字代表了響應的五種狀態之一。
​
　　1XX系列：指定客戶端應相應的某些動作，代表請求已被接受，需要繼續處理。由於 HTTP/1.0 協議中沒有定義任何 1xx 狀態碼，所以除非在某些試驗條件下，伺服器禁止向此類客戶端發送 1xx 響應。
​
 
​
　　2XX系列：代表請求已成功被伺服器接收、理解、並接受。這系列中最常見的有200、201狀態碼。
　　200狀態碼：表示請求已成功，請求所希望的響應頭或數據體將隨此響應返回
　　201狀態碼：表示請求成功並且伺服器創建了新的資源，且其 URI 已經隨Location 頭資訊返回。假如需要的資源無法及時建立的話，應當返回 '202 Accepted'
​
　　202狀態碼：伺服器已接受請求，但尚未處理
​
 
​
　　3XX系列：代表需要客戶端採取進一步的操作才能完成請求，這些狀態碼用來重定向，後續的請求地址（重定向目標）在本次響應的 Location 域中指明。這系列中最常見的有301、302狀態碼。
　　301狀態碼：被請求的資源已永久移動到新位置。伺服器返回此響應（對 GET 或 HEAD 請求的響應）時，會自動將請求者轉到新位置。
​
　　302狀態碼：請求的資源臨時從不同的URI響應請求，但請求者應繼續使用原有位置來進行以後的請求
​
     304自從上次請求後，請求的網頁未修改過。伺服器返回此響應時，不會返回網頁內容。 如果網頁自請求者上次請求後再也沒有更改過，您應將伺服器配置為返回此響應(稱為 If-Modified-Since HTTP 標頭)。
​
　　4XX系列：表示請求錯誤。代表了客戶端看起來可能發生了錯誤，妨礙了伺服器的處理。常見有：401、404狀態碼。
　　401狀態碼：請求要求身份驗證。 對於需要登錄的網頁，伺服器可能返回此響應。
　　403狀態碼：伺服器已經理解請求，但是拒絕執行它。與401響應不同的是，身份驗證並不能提供任何幫助，而且這個請求也不應該被重複提交。
​
　　404狀態碼：請求失敗，請求所希望得到的資源未被在伺服器上發現。沒有資訊能夠告訴用戶這個狀況到底是暫時的還是永久的。假如伺服器知道情況的話，應當使用410狀態碼來告知舊資源因為某些內部的配置機制問題，已經永久的不可用，而且沒有任何可以跳轉的地址。404這個狀態碼被廣泛應用於當伺服器不想揭示到底為何請求被拒絕或者沒有其他適合的響應可用的情況下。
​
 
​
　　5xx系列：代表了伺服器在處理請求的過程中有錯誤或者異常狀態發生，也有可能是伺服器意識到以當前的軟硬體資源無法完成對請求的處理。常見有500、503狀態碼。
　　500狀態碼：伺服器遇到了一個未曾預料的狀況，導致了它無法完成對請求的處理。一般來說，這個問題都會在伺服器的程式碼出錯時出現。
　　503狀態碼：由於臨時的伺服器維護或者過載，伺服器當前無法處理請求。通常，這個是暫時狀態，一段時間會恢復
　　了解基本SEO狀態碼，是SEO優化人員必備知識。HTTP狀態碼是伺服器和客戶端之間交流資訊的語言。通過查看網站日誌的HTTP碼，我們可以清楚查看搜索引擎在網站的爬取情況。
​

8.Ajax快取

在請求地址後面添加一個隨機數，解決ie低版本快取的問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="btn">發送Ajax請求</button>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
​
        btn.onclick = function () {
            // 1.創建ajax對象
            var xhr = new XMLHttpRequest();
            // 2.告訴Ajax對象要向哪發送請求，以什麼方式發送請求
            // 1)請求方式 2)請求地址
            //在請求地址後面添加一個隨機數，解決ie低版本快取的問題
            xhr.open('get', '//localhost:3000/cache?t='+Math.random());
            // 3.發送請求
            xhr.send();
            // 4.獲取伺服器端響應到客戶端的數據
            xhr.onreadystatechange = function (){
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert(xhr.responseText);
                }
            }
            
        }
    </script>
</body>
</html>

9.Ajax非同步請求

請求屬於一個非同步操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        // 1.創建ajax對象
        var xhr = new XMLHttpRequest();
        // 2.告訴Ajax對象要向哪發送請求，以什麼方式發送請求
        // 1)請求方式 2)請求地址
        xhr.open('get', '//localhost:3000/first');
        // 3.發送請求
        xhr.send();
        // 4.獲取伺服器端響應到客戶端的數據
        xhr.onreadystatechange = function (){
            if (xhr.readyState == 4) {
                console.log('2')
                console.log(xhr.responseText)
            }
            
        }
​
        console.log('1');
    </script>
</body>
</html>

以上程式碼執行的結果為

image-20200709120108853

請求數據需要時間，因此先列印了1，後列印了2

10.ajax函數封裝

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		function ajax(options){

			var defaults = {
				type:'get',
				url:'',
				data:{},
				header:{
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success:function(){},
				error:function(){}
			}

			// 使用options對象中的屬性覆蓋defaults對象中的屬性
			Object.assign(defaults,options);

			//創建ajax對象
			var xhr = new XMLHttpRequest();

			//判斷請求方式處理客戶端傳遞的參數
			var params = '';
			for(var attr in defaults.date){
				params += attr + '=' + defaults.date[attr] + '&';
			} 
			//去掉最後面多出來的&
			params = params.substr(0,params.length-1);
			// console.log(params);
			
			if(defaults.type == 'get'){
				defaults.url = defaults.url + '?' + params;
			}
			
			//配置ajax
			xhr.open(defaults.type,defaults.url);
			if(defaults.type == 'post'){
				var contentType = defaults.header['Content-Type'];
				//設置請求權參數格式的類型，(post請求必須要設置)
				xhr.setRequestHeader('Content-Type',contentType);
				//如果是json格式就把對象轉換為字元串發送給伺服器
				if(contentType == 'application/json'){
					xhr.send(JSON.stringify(defaults.date));
				}else{
					xhr.send(params);
				}
				
			}else{
				//發送請求
				xhr.send();
			}
			
			//監聽load事件，當xhr接收完響應數據時觸發
			xhr.onload=function(){

				//xhr.getResponseHeader()獲取響應頭數據
				var contentType = xhr.getResponseHeader('Content-Type');
				// 伺服器端返回的數據
				var responseText = xhr.responseText;

				// 如果響應類型中包含application/json
				if (contentType.includes('application/json')) {
					// 將json字元串轉換為json對象
					responseText = JSON.parse(responseText)
				}

				//當http狀態碼等於200的時候
				if(xhr.status == 200){
					//請求成功 調用處理成功情況的函數
					defaults.success(responseText);
				}else {
					//請求失敗調用
					defaults.error(responseText,xhr);
				}
			}
		}

		//調用ajax函數
		ajax({
			//請求方式
			type:'post',
			//請求地址
			url:'//localhost:3000/requestDate',
			success:function(data){
				console.log('這裡是success函數');
				console.log(data);		
			}
		})

		/*
			請求參數要考慮的問題

				1.請求參數位置的問題

					將請求參數傳遞到ajax函數內部, 在函數內部根據請求方式的不同將請求參數放置在不同的位置

					get 放在請求地址的後面

					post 放在send方法中

				2.請求參數格式的問題

					application/x-www-form-urlencoded

						參數名稱=參數值&參數名稱=參數值

						name=zhangsan&age=20

					application/json

						{name: 'zhangsan', age: 20}

				3.接收數據的處理
				如果傳遞過去的是json格式的數據，
					伺服器響應的數據要轉換為json格式

					1.傳遞對象數據類型對於函數的調用者更加友好
					2.在函數內部對象數據類型轉換為字元串數據類型更加方便

		*/
	</script>
</body>
</html>

二、jquery中ajax的使用

1.$.ajax方法基本使用

  • 參數說明

參數 參數說明
type 請求方式(get,post,delete,put等等)
url 請求的地址
data 請求的參數
contentType 指定參數的格式類型
beforeSend 在發送之前會被調用的函數
success 請求成功後的回調函數
error 請求失敗以後的回調函數

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$.ajax方法基本使用</title>
</head>
<body>
	<button id="btn">發送請求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		$('#btn').on('click',function(){
			$.ajax({
				//請求方式
				type:'post',
				//請求地址
				url:'/app',
				//請求成功以後調用的函數
				success:function(result){
					//result為伺服器返回的數據
					//方法內會自動將json字元串轉換為json 對象
					console.log(result); 
				},
				//請求失敗以後函數被調用
				error:function(xhr){
					console.log(xhr);
					
				}
			})
		})
	</script>
</body>
</html>

2.$.ajax方法傳遞請求參數

以json字元串的格式傳遞

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$.ajax方法基本使用</title>
</head>
<body>
	<button id="btn">發送請求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		var params = {name: 'wangwu', age: 300}
		$('#btn').on('click', function () {
			$.ajax({
				// 請求方式
				type: 'post',
				// 請求地址
				url: '/user',
				// 向伺服器端發送的請求參數
				// name=zhangsan&age=100
				// data: {
				// 	name: 'zhangsan',
				// 	age: 100
				// },
				data: JSON.stringify(params),
				// 指定參數的格式類型
				contentType: 'application/json',
				//在請求發送前會被調用
				beforeSend:function(){
					alert('請求即將發送');
					// return false;

				},
				// 請求成功以後函數被調用
				success: function (response) {
					// response為伺服器端返回的數據
					// 方法內部會自動將json字元串轉換為json對象
					console.log(response);
				}
			})
		});
	</script>
</body>
</html>

3.serialize方法說明

$(this).serialize()可以將表單內容拼接成字元串類型的參數

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>serialize方法說明</title>
</head>
<body>
	<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="submit" value="提交">
	</form>
	<script src="/js/jquery.min.js"></script>
	<script type="text/javascript">
		$('#form').on('submit', function () {
			// 將表單內容拼接成字元串類型的參數username=123&password=123
			// var params = $(this).serialize();
			// console.log(params)  username=123&password=123
			
			console.log(serializeObject($(this)))
			//阻止表單默認行為
			return false;
		});

		// 將表單中用戶輸入的內容轉換為對象類型
		function serializeObject (obj) {
			// 處理結果對象
			var result = {};
			//serializeArray()將表單的數據轉換為數組，數組裡面是表單數據對象
			// [{name: 'username', value: '用戶輸入的內容'}, {name: 'password', value: '123456'}]
			var params = obj.serializeArray();

			// 循環數組 將數組轉換為對象類型
			$.each(params,function(i,ele){
				result[ele.name] = ele.value;
			})
			// 將處理的結果返回到函數外部
			return result;
		}

	</script>
</body>
</html>

三、模板引擎的簡單使用

1.快速上手

一、引入art-template.js文件

<script src="template-debug.js"></script>

二、編寫HTML模板

使用一個type=”text/html”的script標籤存放模板：

<script type="text/html" id="tpl">
		<span>姓名：{{name}}</span><br>
		<span>年齡：{{age}}</span>
</script>

三、向模板插入數據，並輸出到頁面

var data = {
    name: '張三',
    age: 20
}
var html = template("tpl",data);
document.getElementById('container').innerHTML = html;

四、完整程式碼

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>渲染模板</title>
</head>

<body>
	<div id="container"></div>
	<!-- 引入模板引擎 -->
	<script src="js/template-web.js"></script>
	<!-- 拼接數據 -->
	<script type="text/html" id="tpl">
		<span>姓名：{{name}}</span><br>
		<span>年齡：{{age}}</span>
	</script>

	<script>
		//告訴模板引擎哪個數據和哪個模板進行拼接 返回拼接好的html
        var data = {
            name: '張三',
            age: 20
        }
		var html = template('tpl', data);
		//利用dom操作元素，把拼接好的html添加到頁面當中
		document.getElementById('container').innerHTML = html;
	</script>
</body>

</html>

執行結果

image-20200709133113846

image-20200709133436159

 

2.原文輸出

在屬性面前加一個@或者#表示原文輸出

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>原文輸出</title>
</head>
<body>
	<div id="container"></div>
	<script src="js/template-web.js"></script>
	<script type="text/html" id="tpl">
		<div>
			<!-- 在屬性名前面加@或者#表示原文輸出 -->
			<span>姓名：{{# name}}</span>
			<span>年齡：{{age}}</span>
		</div>
	</script>
	<script>
		var data = {
			name: '<b>李四</b>',
			age: 30
		}

		// 這是告訴模板引擎將模板id為tpl的模板和data數據對象進行拼接
		var html = template('tpl', data);
		console.log(html);
		document.getElementById('container').innerHTML = html;
	</script>
</body>
</html>

3.簡單的語法

    <!-- 標準語法-->
    <p>{{name}}</p>
    <p>{{1+1}}</p>
    <p>{{1+1 == 2 ? '相等' : '不相等'}}</p>
    <p>{{content}}</p>
    <p>{{@content}}</p>
    <!-- 原始語法 -->
    <p><%=name%></p>
    <p><%=1+1%></p>
    <p><%=1+1 == 2 ? '相等' : '不相等'%></p>
    <p><%=content%></p>
    <p><%-content%></p>

3.1if語法

// 標準
{{if age > 18}}
	年齡大於18
{{else if age < 15}}
	年齡小於15
{{else}}
	年齡不符合要求
{{/if}}

// 原生
<%if(age < 15) {%> 
	年齡小於15 
<%} else if (age >18) {%>
	年齡大於18
<%} else {%>
	年齡不符合要求	
<%}%>

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>條件判斷</title>
</head>
<body>
	<div id="container"></div>
	<script src="js/template-web.js"></script>
	<script type="text/html" id="tpl">
		<div>
			<span>姓名：{{@ name}}</span>
			<span>年齡：{{age}}</span>
		</div>
		<!-- 標準語法 -->
		{{if age > 18}}
			<div>年大於18</div>
		{{else}}
			<div>年齡小於18</div>
		{{/if}}

		<!-- 原生語法 -->
		<%if (age > 18) {%>
			<div>年大於18</div>
		<%}%><%else{%>
			<div><%=age%>年齡小於18</div>	
		<%}%>
	</script>
	<script>
		var data = {
			name: '<b>李四</b>',
			age: 17
		}

		// 這是告訴模板引擎將模板id為tpl的模板和data數據對象進行拼接
		var html = template('tpl', data);
		document.getElementById('container').innerHTML = html;
	</script>
</body>
</html>

3.2循環

<ul>
	{{each users}} //user為循環的對象
		<li>
			{{$value.name}} // $value表示每個循環項 $index表示每個循環的索引
			{{$value.age}}
			{{$value.sex}}
		</li>
	{{/each}}
</ul>
      
<ul>
	<%for(var i =0;i<users.length;i++){%>
		<li>
			<%=users[i].name%>
			<%=users[i].age%>
			<%=users[i].sex%>
		</li>
	<%}%>
</ul>

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>循環</title>
</head>
<body>
	<div id="container"></div>
	<script src="js/template-web.js"></script>
	<script type="text/html" id="tpl">
		<ul>
			<!-- 標準寫法 -->
			{{each data}}
			<li>
				<span>姓名：{{$value.name}}</span>
				<span>年齡：{{$value.age}}</span>
			</li>
			{{/each}}
			<br>
			<!-- 原生寫法 -->
			<%for (var i = 0;i < data.length;i++){%>
			<li>
				<span>姓名：<%=data[i].name%></span>
				<span>年齡：<%=data[i].age%></span>
			</li>
			<%}%>
		</ul>
	</script>
	<script>
		// 這是告訴模板引擎將模板id為tpl的模板和data數據對象進行拼接
		var html = template('tpl', {
			data: [{
				name: '張三',
				age: 15
			}, {
				name: '李四',
				age: 20
			}, {
				name: '王五',
				age: 10
			}]
		});
		document.getElementById('container').innerHTML = html;
	</script>
</body>
</html>

3.3導入模板變數

通過

template.defaults.imports.dateFormat = xxx

的方式導入向模板導入定義的變數或者函數

模板中通過$import.xxx的方式引入

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>導入模板變數</title>
</head>
<body>
	<div id="container"></div>
	<script src="js/template-web.js"></script>
	<script type="text/html" id="tpl">
		<div>當前時間是{{$imports.dateFormat(date)}}</div>
	</script>
	<script>
		window.onload = function () {
			//向模板中導入變數
			template.defaults.imports.dateFormat = dateFormat;

			//告訴模板引擎要將哪個模板和哪個數據進行拼接,返回拼接好的字元串
			var html = template('tpl',{
				date:new Date()
			})
			console.log(html);
			document.getElementById('container').innerHTML = html;
		}
		

		function dateFormat(date){
			return  date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDay() + '日' ;
		}
		
	</script>
</body>
</html>

 

VirMach 便宜 VPS

QNews

QNews