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

艺术模板 art-template-web的更多相关文章

  1. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  2. DjangoMTV模型之视图层views及模板层template

    Django视图层中views的内容 一个视图函数,简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容(render),也可以是一个重定向( ...

  3. 《JAVA设计模式》之模板模式(Template)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述模板方法(Template Method)模式的: 模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式 ...

  4. ASP。netcore,Angular2 CRUD动画使用模板包，WEB API和EF 1.0.1

    下载Angular2ASPCORE.zip - 1 MB 介绍 在本文中,让我们看看如何创建一个ASP.NET Core CRUD web应用程序与Angular2动画使用模板包,web API和EF ...

  5. Django 模板（Template）

    1. 模板简介 2. 模板语言 DTL 3. 模板继承 4. HTML 转义 5. CSRF 1. 模板简介 作为 Web 开发框架,Django 提供了模板,可以很便利的动态生成 HTML.模版系统 ...

  6. Django笔记&教程 3-1 模板（Template）基础

    Django 自学笔记兼学习教程第3章第1节--模板(Template)基础 点击查看教程总目录 1 介绍 模板文件:让Django能够自动生成html代码 作为一个web框架,Django需要需要在 ...

  7. 模板（Template）

    最近阅读google chromium base container stack_container代码,深刻感觉到基础知识不扎实. // Casts the buffer in its right ...

  8. 重载（Overloading）以及模板（Template）

    继续<C++ premier plus>的学习 (1)函数重载,通俗来说,就是相同的函数名字名下,存在多个函数,要使得这成立,各个同名函数必须形参列表(也称为"签名", ...

  9. Django——模板层(template)（模板语法、自定义模板过滤器及标签、模板继承）

    前言:当我们想在页面上给客户端返回一个当前时间,一些初学者可能会很自然的想到用占位符,字符串拼接来达到我们想要的效果,但是这样做会有一个问题,HTML被直接硬编码在 Python代码之中. 1 2 3 ...

随机推荐

  1. Spark源码剖析 - SparkContext的初始化(一)

    1. SparkContext概述 注意:SparkContext的初始化剖析是基于Spark2.1.0版本的 Spark Driver用于提交用户应用程序,实际可以看作Spark的客户端.了解Spa ...

  2. Contest1874 - noip基础知识五：动态规划(背包、树dp、记忆化、递推、区间、序列dp、dp优化)

    传送门 T1  dp[n][m]=dp[n-1][m-1]+dp[n-m][m] T2  ans=cat(n)*(n!)2  卡特兰数 T3  dp[i][j]=sigma(dp[i-1][j-a[i ...

  3. BZOJ #3625 CF #438E 小朋友和二叉树

    清真多项式题 BZOJ #3625 codeforces #438E 题意 每个点的权值可以在集合$ S$中任取 求点权和恰好为$[1..n]$的不同的二叉树数量 数据范围全是$ 10^5$ $ So ...

  4. UOJ #109「APIO2013」TASKSAUTHOR

    貌似是最入门的题答题 刚好我就是入门选手 就这样吧 UOJ #109 题意 太热了不讲了 $ Solution$ 第一个点:$ 105$个数字卡掉$ Floyd$ 直接$101$个点无出边一次询问就好 ...

  5. 两个Html页面之间值得传递

    传值的页面:<a href='stockProductInfo.html?prdId="+v.prdID+"' target='_blank'></html> ...

  6. Django之auth模块

    http://www.cnblogs.com/liwenzhou/p/9030211.html 1.首先导入auth模块 from django.contrib import auth 2.创建aut ...

  7. vue中怎么实现获取当前点击对象this

    应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...

  8. Visual Studio Code 的使用方法和技巧

    VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验. 布局:左侧是用于展示所要编辑的所有文件和文件夹的文件管理器,依次是`资源管理器`,`搜索`, ...

  9. QML ListView json

    1.main.cpp #include <QGuiApplication> #include <QQmlApplicationEngine> #include <QQml ...

  10. EHCache：Eelment刷新后，timeToLiveSeconds失效了？

    个人以为只要设定了timeToLiveSeconds,中间过程不管有没有访问,只要LiveSeconds时间到了,缓存就会失效.但是开发时发现并非如此,经过一番折腾,最终发现自己的理解是正确的,还是使 ...