阅读这篇文章后，对html和json有很大的启发：

http://www.zhangxinxu.com/wordpress/2012/09/javascript-html-json-template/

然后这是一个缩减版的：

大致步骤是：

1、准备好html模板

2、准备好json数据

3、设置匹配方法

4、将整合数据加入内容区

<!DOCTYPE html>

<html lang="zn-ch">

<head>

<meta charset="UTF-8">

<title>tempo</title>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>

<!--内容区 -->

<ul></ul>

<!--模板区 -->

<textarea style="display:none;">

<li>

   $name$

</li>

</textarea>

<script type="text/javascript">

<!--json数据 -->

var mydata = [

    {'name':'Bob','age':40},

    {'name':'Frank','age':15},

    {'name':'Bill','age':65},

    {'name':'Robert','age':24}

];

//字符串扩展匹配方法，json数据的name将替换模板的$name$

String.prototype.temp = function(obj) {

    return this.replace(/\$\w+\$/gi, function(matchs) {

        var returns = obj[matchs.replace(/\$/g, "")];

        return (returns + "") == "undefined"? "": returns;

    });

};

//定义最终合成数据

var htmlList ="";

//html模板

var htmlTemp = $("textarea").val();

//匹配对应字符串

mydata.forEach(function(object) {

htmlList += htmlTemp.temp(object);

});

//合成内容放进内容区

$("ul").html(htmlList);

</script>

</body>

</html>

此外，也可借助其他工具实现json和html的交互，如：

tempo将json数据填充到html模板

利用json2html将json数据填充到html模板

html模板与json数据交互的更多相关文章

  1. 移动端基于HTML模板和JSON数据的JavaScript交互

    写本文之前,我正在做一个基于Tab页的订单中心: 每点击一个TAB标签,会请求对应状态的订单列表.之前的项目,我会在js里使用 +  连接符连接多个html内容: var html = ''; htm ...

  2. spring-boot json数据交互

    SpringBoot学习之Json数据交互 最近在弄监控主机项目,对javaweb又再努力学习.实际的项目场景中,前后分离几乎是所以项目的标配,全栈的时代的逐渐远去,后端负责业务逻辑处理,前端负责数据 ...

  3. SpringMVC框架笔记02_参数绑定返回值文件上传异常处理器JSON数据交互_拦截器

    目录 第1章 高级参数的绑定 1.1 参数的分类 1.2 数组类型的参数的绑定 1.3 集合类型的参数的绑定 第2章 @RequestMapping的用法 2.1 URL路径映射 2.2 请求方法限定 ...

  4. json数据交互

    springmvc 的json数据交互 - 哎幽的成长 - CSDN博客--和老师讲课相同http://blog.csdn.net/u012373815/article/details/4720818 ...

  5. SpringMVC JSON数据交互

    本节内容: @RequestBody @ResponseBody 请求json,响应json实现 前端可以有很多语言来写,但是基本上后台都是java开发的,除了c++(开发周期长),PHP和#Net( ...

  6. springMVC学习(11)-json数据交互和RESTful支持

    一.json数据交互: json数据格式在接口调用中.html页面中较常用,json格式比较简单,解析还比较方便. 比如:webservice接口,传输json数据. springMVC进行json交 ...

  7. SpringMVC入门（二）—— 参数的传递、Controller方法返回值、json数据交互、异常处理、图片上传、拦截器

    一.参数的传递 1.简单的参数传递 /* @RequestParam用法:入参名字与方法名参数名不一致时使用{ * value:传入的参数名,required:是否必填,defaultValue:默认 ...

  8. Spring MVC之JSON数据交互和RESTful的支持

    1.JSON概述 1.1 什么是JSON JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式.它是基于JavaScript的一个子集,使用了C.C ...

  9. springmvc的json数据交互

    准备 @RequestBody 作用: @RequestBody注解用于读取http请求的内容(字符串),通过springmvc提供的HttpMessageConverter接口将读到的内容(json ...

随机推荐

  1. [How to]如何通过xib来自定义UIViewController

    代码:https://github.com/xufeng79x/CreateControllerByXib 1.简介 UIViewController实例可以通过代码.storyborad或者xib方 ...

  2. 百度笔试题：malloc/free与new/delete的区别（转）

    百度笔试题:malloc/free与new/delete的区别 相同点:都可以申请动态内存和释放内存. 不同点: (1) 操作对象有所不同: malloc和free是C/C++的标准库函数,new和d ...

  3. ios IAP 内购验证

    参考我之前的笔记 苹果内购笔记,在客户端向苹果购买成功之后,我们需要进行二次验证. 二次验证 IOS在沙箱环境下购买成功之后,向苹果进行二次验证,确认用户是否购买成功. 当应用向Apple服务器请求购 ...

  4. [ python ] 类的组合

    首先,使用面向对象是一个人狗大战的实例: class Person: def __init__(self, name, hp, aggr, sex): self.name = name self.hp ...

  5. Restful Framework （二）

    目录 一.认证 二.权限 三.限制访问频率 四.总结 一.认证(补充的一个点) 回到顶部 认证请求头 #!/usr/bin/env python # -*- coding:utf-8 -*- from ...

  6. HAProxy配置代理

    1.代理需求 原始URL:https://www.xxx.com/mili_app/News/NewsServlet.do?processID=getNewsList&type=1&p ...

  7. 让你完全理解Base-64是怎么回事

    HTTP将BASE64-编码用于基本认证和摘要认证,在几种HTTP扩展中也使用了该编码. Base-64编码保证了二进制数据的安全 Base-64编码可以将任意一组字节转换为较长的常见文本字符序列,从 ...

  8. 7.spark Streaming 技术内幕 : 从DSteam到RDD全过程解析

    原创文章,转载请注明:转载自 听风居士博客(http://www.cnblogs.com/zhouyf/)   上篇博客讨论了Spark Streaming 程序动态生成Job的过程,并留下一个疑问: ...

  9. Jsonp方式和httpclient方式有什么区别？

    jsonp基于js,解决跨域问题,本质发起ajax情求但是Jsonp只支持get请求. 它不安全,它先解析js,然后发起ajax请求,然后获取到返回值,通过浏览器返回,最后解析. JQuery和Spr ...

  10. HDU 1561 The more, The Better【树形DP/有依赖的分组背包】

    ACboy很喜欢玩一种战略游戏,在一个地图上,有N座城堡,每座城堡都有一定的宝物,在每次游戏中ACboy允许攻克M个城堡并获得里面的宝物.但由于地理位置原因,有些城堡不能直接攻克,要攻克这些城堡必须先 ...