Ajax——模板引擎
Posted 站错队了同志
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax——模板引擎相关的知识，希望对你有一定的参考价值。
模板介绍
1、必要性：ajax请求从服务器接收到大量数据，此时再用普通的字符串拼接是很耗费时间的，这时候模板就有其必要性
2、便利性：插件套用，现在有很多主流的模板插件：BaiduTemplate(百度开发) 、ArtTemplate(腾讯开发)、 velocity.js(淘宝开发) Handlebars
基本逻辑
1、script标签的type类型不能是默认的，改成text/template，这样就可以作为一个模板而不会被执行了
2、读取模板内的innerhtml
3、正则
4、正则中的exec方法不断的验证模板中是否有匹配的数据，()括号中的子项是键
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/template" id="template"> <ul> <li><%= name %></li> <li><%= age %></li> <li><%= skill %></li> </ul> </script> <script> var tempStr=document.querySelector("#template").innerHTML; var obj={name:\'wq\',age:17,skill:\'eat\'}; var str=fox_template_pro(tempStr,obj); document.write(str); /* str:模板 obj:准备替换的数据 */ function fox_template_pro(str, obj) { var reg = /<%=\\s*([^%>]+\\S)\\s*%>/;// 中间的 小括号 可以对 正则 筛选出来的 字符串 再次筛选 var str = str;// 准备挖好坑的字符串 var obj = obj;// 准备 用来填坑的 对象 /* 第一个 <%= name %> 索引为0 第二个 name 索引为1 */ var result; while (result = reg.exec(str)) { var key = result[1];// 获取匹配的key var value = obj[key];// 通过key获取value str = str.replace(result[0], value);// 替换的是<%= name %> } return str;//执行完毕说明替换完成了 } </script> </body> </html>
腾讯模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="js/template-native.js"></script> <script type="text/template" id="template"> <ul> <li><%=name%></li> <li><%=age%></li> <li><%=skill%></li> <li> <ul> <%for (var i = 0; i < food.length; i++) {%> <li><%=food[i]%></li> <%}%> </ul> </li> </ul> </script> <script> var obj = { name: \'wq\', age: 18, skill: \'eat\', food: [\'米饭\', \'土豆丝\', \'番茄\', \'花生\', \'玉米\'] }; /* 参数1: 模板ID 参数2: 替换数据 */ var resultStr = template(\'template\',obj); document.write(resultStr); </script> </body> </html>
注意事项
1、接收数据单单是数组，必须包裹在对象中传入template方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="js/template-native.js"></script> <script type="text/template" id="template"> <ul> <li> <ul> <%for (var i = 0; i < info.length; i++) {%> <li><%=info[i]%></li> <%}%> </ul> </li> </ul> </script> <script> var ajax = new XMLHttpRequest(); ajax.open(\'get\',\'10.php\'); ajax.send(); ajax.onreadystatechange=function (ev) { if (ajax.readyState==4&&ajax.status==200) { var arr=JSON.parse(ajax.responseText); console.log(arr); var obj={info:arr}; var resultStr=template(\'template\',obj); document.write(resultStr); } } </script> </body> </html>
<?php header("content-type:text/html;charset=utf-8"); echo file_get_contents(\'files/04.json\'); ?>
["wq",17,"eat"]
2、接收数据是字符串，可以用[]括起来，然后包裹在对象中传入template方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="js/template-native.js"></script> <script type="text/template" id="template"> <ul> <li> <ul> <%for (var i = 0; i < info.length; i++) {%> <li><%=info[i][\'name\']%></li> <li><%=info[i][\'age\']%></li> <li><%=info[i][\'sex\']%></li> <%}%> </ul> </li> </ul> </script> <script> var ajax = new XMLHttpRequest(); ajax.open(\'get\',\'10.php\'); ajax.send(); ajax.onreadystatechange=function (ev) { if (ajax.readyState==4&&ajax.status==200) { var arr=JSON.parse(ajax.responseText); console.log(arr); var obj={info:[arr]}; var resultStr=template(\'template\',obj); document.write(resultStr); } } </script> </body> </html>
<?php header("content-type:text/html;charset=utf-8"); echo file_get_contents(\'files/05.json\'); ?>
{"name":"zs1","age":17,"sex":"nan"}
以上是关于Ajax——模板引擎的主要内容，如果未能解决你的问题，请参考以下文章