艺术模板 art-template-web

最快的模板渲染引擎

兼容 ejs 语法

推荐语法

{{$value}} ---- {{$index}}

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);    // 网络不稳定，请刷新重试

            };

        });

    });

});

秒客网

艺术模板 art-template-web

相关文章