艺术模板 art-template____jQuery 项目可用javascript
最快的模板渲染引擎css
兼容 ejs 语法html
推荐语法java
{{each arr}}jquery
{{$value}} ---- {{$index}}git
{{/each}}github
{{if arr}}web
{{arr}}ajax
{{/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); // 网络不稳定,请刷新重试 }; }); }); });