阅读这篇文章后，对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. 【HDU5306】Gorgeous Sequence

    这个题目是Segment-Tree-beats的论文的第一题. 首先我们考虑下这个问题的不同之处在于,有一个区间对x取max的操作. 那么如何维护这个操作呢? 就是对于线段树的区间,维护一个最大值标记 ...

  2. [ Python ] 基本数据类型及属性（下篇）

    1. 基本数据类型 (1) list 列表     (2) tuple 元组     (3) dict 字典     (4) set 集合 2. list 列表方法 Python 内置的一种数据类型, ...

  3. CF914F Substrings in a String

    Description 给你一个字符串ss,共有qq次操作,每个都是下面两种形式的一种. 11 ii cc 这个操作表示将字符串ss的第ii项变为字符cc 22 ll rr yy 这个操作表示输出字符 ...

  4. poj 1330(初探LCA)

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 23795   Accept ...

  5. Distinct Subsequences ——动态规划

    Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...

  6. centos 时间日期设置

    date  时间窗口 date -s '2015-02-02 10:10:00'  更改年月日小时分秒 date -s 10:00:02  只更改时间 不更改年月 clock -w 写入系统时间 hw ...

  7. ShiroFilterFactoryBean分析

    创建核心Filter 同其他框架一样,都有个切入点,这个核心Filter就是拦截所有请求的. 通过web.xml中配置的Filer进入,执行init方法获取这个instance,调用下面的create ...

  8. 洛谷——P1994 有机物燃烧

    P1994 有机物燃烧 题目背景 本来准备弄难点的,还是算了吧 题目描述 输入一种有机物,输出与氧气反应化学方程式中CO2和H2O的系数 输入输出格式 输入格式: 一行,一个字符串,表示有机物 输出格 ...

  9. Flask实战第65天：帖子按照发布时间和评论数量等排序

    排序,我们需要在前端传递参数, 编辑front_index.html 编辑front.views.py from apps.models import HighlightPostModel from ...

  10. 【SpringMVC】一次处理项目中文乱码的经历

    一次处理项目中文乱码的经历 背景 今天把旧服务器上的项目转移到新服务器上,结果返回的json中的中文乱码了,觉得很奇怪,因为新服务器和旧服务器都是TX云,也不会有太大区别呀,于是乎开始了为期半天的蛋疼 ...