art-template是一个预编译工具,在实际应用上可以简化拼接字符串;
这是中文文档:https://aui.github.io/art-template/zh-cn/docs/syntax.html (目前art-template.js的版本是4.12.2);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="div1"></div> </body> </html> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/art-template.js"></script> <script id="ul1" type="text/html"> <ul> {{each data}} <li>{{$index}} {{$value.name}}</li> {{/each}} </ul> </script> <script>
//demo:
$.ajax({ url: "https:www.easy-mock.com/mock/5af2a947086dd715d58ab833/API/getname", success: function (res) { console.log(res) //数据格式 {data:[{name:'liu'},{name:'long'}]} $("#div1").html(template("ul1", res)); //data和res有对应关系;data就是res的下级;(上下级语法):
//or
$("#div1").html(template("ul1", {data:res.data})); //或者直接关系;(对象语法)
}, error:function(res){ console.log(res) } }) </script>
顺便介绍一下: https:www.easy-mock.com 是一个免费的 前后端数据模拟工具(请求不要太频繁),可以根据自己自定义的API生成返回的数据;
当然:前端的页面在本地是打不开的,有ajax请求限制;
我们可以用python3工具自带的本地服务器: (前提安装python环境) DOS 下cd 到哪个目录自己决定,然后 python -m http.server 80 ; OK 好了浏览器可以预览上述结果了;