艺术模板 art-template____jQuery 项目可用
最快的模板渲染引擎
兼容 ejs 语法
推荐语法
{{each arr}}
{{$value}} ---- {{$index}}
{{/each}}
{{if arr}}
{{arr}}
{{/if}}
1. 下载或者安装
2. 引入 template-web.js 库
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="./js/template-web.js"></script>
<script type="text/javascript" src="./js/jquery_ajax.js"></script><!-- 注意编写顺序 -->
2. 创建模板代码
1) 创建 script 标签，将其 type 改为 text/html
2) 设置一个 id 属性
3) 写模板代码
const arr = [{name: 'jaek', age:20}, {name:'rose', age:18}];
const obj = {name: 'jaek', age:20};
3. template(元素id, {要渲染的数据}) 将模板代码解析为 标签字符串
传一个数组 data， 接的就是一个同名的数组 data[0].name
传一个对象 obj，接的就是一个同名的对象 obj.name
返回的是一个 htmlStr，用于追加到 页面生效
4. 将生成的 标签字符串 渲染到 页面上生效
index.html
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>jQuery 中的 ajax</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div id="outer_box"> <select id="province"> <option>请选择省份</option> </select>省 <select id="city"> <option>请选择市</option> </select>市 <select id="county"> <option>请选择区(县)</option> </select>区(县) </div> <script type="text/html" id="templateScript"> <option>{{firstOption}}</option> {{each data}} <option value="{{$value[name]}}">{{$value.name}}</option> {{/each}} </script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="./js/template-web.js"></script> <script type="text/javascript" src="./js/jquery_ajax.js"></script> <!-- 注意编写顺序 --> </body> </html>
jquery_ajax.js
-
$(function () { const $province = $("#province"); const $city = $("#city"); const $county = $("#county"); // 进入页面 首先渲染省份 $.get("http://localhost:3000/province", function({code, data}){ if(code === 200){ const htmlStr = template( 'templateScript', {data, firstOption: '请选择省份', name: 'province'} ); $province.html(htmlStr); }else{ alert(data); // 网络不稳定，请刷新重试 }; }); // 省 改变出现 市 $province.on("change", function(){ const province = this.value; /* <option value="11">北京</option> */ $.get('/city', {province}, function({code, data}){ if(code === 200){ const htmlStr = template( 'templateScript', {data, firstOption: '请选择市', name: 'city'} ); $city.html(htmlStr); }else{ alert(data); // 网络不稳定，请刷新重试 }; }); }); // 市 改变出现 县 $city.on("change", function(){ const province = $province.val(); /* <option value="11">北京</option> */ const city = $city.val(); /* <option value="undefined">鞍山市</option> */ $.get('/county', {province, city}, function({code, data}){ if(code === 200){ const htmlStr = template( 'templateScript', {data, firstOption: '请选择区县', name: 'county'} ); $county.html(htmlStr); }else{ alert(data); // 网络不稳定，请刷新重试 }; }); }); });