模板介绍

1、必要性：ajax请求从服务器接收到大量数据，此时再用普通的字符串拼接是很耗费时间的，这时候模板就有其必要性

2、便利性：插件套用，现在有很多主流的模板插件：BaiduTemplate(百度开发) 、ArtTemplate(腾讯开发)、 velocity.js(淘宝开发) Handlebars

基本逻辑

1、script标签的type类型不能是默认的，改成text/template，这样就可以作为一个模板而不会被执行了

2、读取模板内的innerHTML

3、正则

4、正则中的exec方法不断的验证模板中是否有匹配的数据，()括号中的子项是键

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script type="text/template" id="template">

    <ul>

        <li><%= name %></li>

        <li><%= age %></li>

        <li><%= skill %></li>

    </ul>

</script>

<script>

    var tempStr=document.querySelector("#template").innerHTML;

    var obj={name:'wq',age:17,skill:'eat'};

    var str=fox_template_pro(tempStr,obj);

    document.write(str);

    /*

        str:模板

        obj:准备替换的数据

    */

    function fox_template_pro(str, obj) {

        var reg = /<%=\s*([^%>]+\S)\s*%>/;// 中间的 小括号 可以对 正则 筛选出来的 字符串 再次筛选

        var str = str;// 准备挖好坑的字符串

        var obj = obj;// 准备 用来填坑的 对象

        /*

            第一个 <%= name %> 索引为0

            第二个 name        索引为1

        */

        var result;

        while (result = reg.exec(str)) {

            var key = result[1];// 获取匹配的key

            var value = obj[key];// 通过key获取value

            str = str.replace(result[0], value);// 替换的是<%= name %>

        }

        return str;//执行完毕说明替换完成了

    }

</script>

</body>

</html>

腾讯模板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script src="js/template-native.js"></script>

<script type="text/template" id="template">

    <ul>

        <li><%=name%></li>

        <li><%=age%></li>

        <li><%=skill%></li>

        <li>

            <ul>

                <%for (var i = 0; i < food.length; i++) {%>

                     <li><%=food[i]%></li>

                <%}%>

            </ul>

        </li>

    </ul>

</script>

<script>

    var obj = {

        name: 'wq',

        age: 18,

        skill: 'eat',

        food: ['米饭', '土豆丝', '番茄', '花生', '玉米']

    };

    /*

        参数1: 模板ID

        参数2: 替换数据

    */

    var resultStr = template('template',obj);

    document.write(resultStr);

</script>

</body>

</html>

注意事项

1、接收数据单单是数组，必须包裹在对象中传入template方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script src="js/template-native.js"></script>

<script type="text/template" id="template">

    <ul>

        <li>

            <ul>

                <%for (var i = 0; i < info.length; i++) {%>

                <li><%=info[i]%></li>

                <%}%>

            </ul>

        </li>

    </ul>

</script>

<script>

    var ajax = new XMLHttpRequest();

    ajax.open('get','10.php');

    ajax.send();

    ajax.onreadystatechange=function (ev) {

        if (ajax.readyState==4&&ajax.status==200) {

            var arr=JSON.parse(ajax.responseText);

            console.log(arr);

            var obj={info:arr};

            var resultStr=template('template',obj);

            document.write(resultStr);

        }

    }

</script>

</body>

</html>
<?php

  header("content-type:text/html;charset=utf-8");

  echo file_get_contents('files/04.json');

?>
["wq",17,"eat"]

2、接收数据是字符串，可以用[]括起来，然后包裹在对象中传入template方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script src="js/template-native.js"></script>

<script type="text/template" id="template">

    <ul>

        <li>

            <ul>

                <%for (var i = 0; i < info.length; i++) {%>

                <li><%=info[i]['name']%></li>

                <li><%=info[i]['age']%></li>

                <li><%=info[i]['sex']%></li>

                <%}%>

            </ul>

        </li>

    </ul>

</script>

<script>

    var ajax = new XMLHttpRequest();

    ajax.open('get','10.php');

    ajax.send();

    ajax.onreadystatechange=function (ev) {

        if (ajax.readyState==4&&ajax.status==200) {

            var arr=JSON.parse(ajax.responseText);

            console.log(arr);

            var obj={info:[arr]};

            var resultStr=template('template',obj);

            document.write(resultStr);

        }

    }

</script>

</body>

</html>
<?php

  header("content-type:text/html;charset=utf-8");

  echo file_get_contents('files/05.json');

?>
{"name":"zs1","age":,"sex":"nan"}

Ajax——模板引擎的更多相关文章

  1. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  2. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  3. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. 第115天：Ajax 中artTemplate模板引擎（一）

    一.不分离与分离的比较 1.前后端不分离,以freemarker模板引擎为例,看一下不分离的前后端请求的流程是什么样的? 从上图可以看出,前后端开发人员的工作耦合主要在(3)Template的使用.后 ...

  5. ajax配合art-template模板引擎的使用

    最近才接触js的模板引擎听说相比以前使用的js foreach加载后台返回的json数据简便很多而且效率方面也很不错.今天自己玩了一下 后台使用的是.net mvc,数据库脚本就不提供了,返回的Jso ...

  6. Ajax概述，封装以及联合模板引擎进行数据交互

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 更多资料可参考Ajax 介绍 ...

  7. AJAX里使用模板引擎

    一.概述: 处理响应数据渲染可以使用模板引擎(实际上就是一个API,目的是更容易的将数据渲染到HTML中) 目前市面上有许多模板引擎,可以参考 推荐使用artTemplate,它采用作用域预声明的技术 ...

  8. 浅谈 Web 中前后端模板引擎的使用

    前言 这篇文章本来不打算写的,实话说楼主对前端模板的认识还处在非常初级的阶段,但是为了整个 源码解读系列 的完整性,在深入 Underscore _.template 方法源码后,觉得还是有必要记下此 ...

  9. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

随机推荐

  1. 这个函数有搞头，要调试通过就差不多啦--ImpersonateActiveUserAndRun

    //Function to run a process as active user from windows service void ImpersonateActiveUserAndRun() { ...

  2. HDU1565 方格取数1（构图+网络流最大独立集合）

    题目大意:给你一个n*n的格子的棋盘,每个格子里面有一个非负数. 从中取出若干个数,使得任意的两个数所在的格子没有公共边,就是说所取的数所在的2个格子不能相邻,并且取出的数的和最大. 解题思路:最大点 ...

  3. Eclipse查看方法/类调用的方法

    1.(首推)双击选中该方法/类,[Ctrl]+[Alt]+[H](Open Call Hierarchy) 2.(次推)选中该方法/类,[Ctrl]+[Shift]+[G](References) 3 ...

  4. Java 实现抽象工厂模式

    抽象工厂模式 里面有几个概念:抽象工厂.实体工厂.抽象产品.实体产品 抽象工厂:定义创建产品的抽象方法 实体工厂:详细的创建哪种产品 抽象产品:一个接口或基类 实体产品:实现详细功能,或派生 类图 ...

  5. 百度LBS云搜索时报错 &quot;filter:area is not filteable field, please set property in the cloud-storage

    {"status":2,"message":"filter:area is not filteable field, please set prope ...

  6. Ubuntu 12.04 LTS 无法进入桌面环境

    今天开机后,在登陆的时候,进入了登陆界面(选择用户,输入密码的那个界面),输入正确的密码后屏幕跳转了一下,但是很快又回到了登陆界面.然后我就尝试以guest [访客]的身份登陆,发现进入了桌面系统. ...

  7. 【poj 1724】 ROADS 最短路（dijkstra+优先队列）

    ROADS Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12436 Accepted: 4591 Description N ...

  8. Java程序执行超时——Future接口介绍

    在Java中,如果需要设定代码执行的最长时间,即超时,可以用Java线程池ExecutorService类配合Future接口来实现. Future接口是Java标准API的一部分,在java.uti ...

  9. Android EditText默认不获取焦点

    1.当页面中有多个EditText时,第一个EditText会自动获取焦点,取消的办法: 在EditText的父View中调用: android:focusable="true"  ...

  10. caffe to tensorflow alexnet model

    from kaffe.tensorflow import Network class AlexNet(Network): def setup(self): (self.feed('data') .co ...