模板介绍

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. 自定义EL表达式，将对象转成json格式，关键代码

    做javaweb开发的最常用的一个东西el表达式,这个东西是个很好用的东西,但有些时候我们处理复杂的字符串操作,就有些相形见绌了,这个时候就需要用自定义的方法去实现更多简洁方便的事情. 下面自定义一个 ...

  2. linux安装java mysql tomcat 环境

    安装jdk: 1. 查看系统版本 uname -a 2.查看操作系统 cat  /proc/version 3.上传安装文件到指定目录   tar -zxvf jdkxxx. 4.修改配置文件  vi ...

  3. 初识iBatis

    在JAVA EE应用程序中,持久层框架常用的有:Hibernate和IBATIS(或MyBatis),Hibernate是全自动的,IBatis是半自动的. IBatis的主要的作用是把SQL语句从我 ...

  4. angularjs中比较实用的multipleselect选择框

    一. HTML HTML中比较多逻辑代码,修改的时候要注意修改很多绑值的地方. <div class="form-group"> <label class=&qu ...

  5. 1.3－动态路由协议RIP①

    Dynamic Routing Protocol:动态路由协议 现代IP网络中,主要的动态路由协议: AD/管理距离: 1:DV/距离向量协议:RIP(120)/IGRP(100) 2:LS/链路状态 ...

  6. Codeforces 577E Ann and Half-Palindrome 字典树

    题目链接 题意: 若一个字符串是半回文串.则满足第一位和最后一位相等, 第三位和倒数第三位相等.如此类推. 给定一个字符串s,输出s的全部子串中的半回文串字典序第k大的 字符串. good[i][j] ...

  7. skynet 控制台管理使用技巧

    skynet 自带了一个控制台服务.能够非常方便获取和调试 skynet 执行数据,并且能够热更新代码,所以.弄明确skynet控制台管理能够让你更好地使用skynet,甚至改进这个控制台服务.以满足 ...

  8. android 4.0主线程訪问网络问题

    在4.0下面,在主线程中訪问网络,假设请求超过6s的话,就会报ANR,那么这就会带来一个问题,假设网络慢或者请求的数据过大时,界面会卡顿,造成界面灵敏性非常差,因此网络请求一般不能放在主线程中操作,g ...

  9. 快学Scala习题解答—第十章 特质

    10 特质 10.1 java.awt.Rectangle类有两个非常实用的方法translate和grow,但可惜的是像java.awt.geom.Ellipse2D这种类没有. 在Scala中,你 ...

  10. research plan1111

    Hello prof.Choi 感谢您的来电,与您的这次通话我已经期盼了很久.我来做个自我介绍,我叫陈飞,今年27岁了,是河北地质大学计算机科学专业的本科毕业生.我非常想提高自己的学历,现在经过刘老师 ...