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