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

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

然后这是一个缩减版的：

大致步骤是：

1、准备好html模板

2、准备好json数据

3、设置匹配方法

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

  1. <!DOCTYPE html>
  2. <html lang="zn-ch">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>tempo</title>
  6. <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  7. </head>
  8. <body>
  9. <!--内容区 -->
  10. <ul></ul>
  11.  
  12. <!--模板区 -->
  13. <textarea style="display:none;">
  14. <li>
  15.    $name$
  16. </li>
  17. </textarea>
  18. <script type="text/javascript">
  19. <!--json数据 -->
  20. var mydata = [
  21.     {'name':'Bob','age':40},
  22.     {'name':'Frank','age':15},
  23.     {'name':'Bill','age':65},
  24.     {'name':'Robert','age':24}
  25. ];
  26. //字符串扩展匹配方法，json数据的name将替换模板的$name$
  27. String.prototype.temp = function(obj) {
  28.     return this.replace(/\$\w+\$/gi, function(matchs) {
  29.         var returns = obj[matchs.replace(/\$/g, "")];
  30.         return (returns + "") == "undefined"? "": returns;
  31.     });
  32. };
  33. //定义最终合成数据
  34. var htmlList ="";
  35.  
  36. //html模板
  37. var htmlTemp = $("textarea").val();
  38.  
  39. //匹配对应字符串
  40. mydata.forEach(function(object) {
  41. htmlList += htmlTemp.temp(object);
  42. });
  43. //合成内容放进内容区
  44. $("ul").html(htmlList);
  45. </script>
  46. </body>
  47. </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. 2017多校第9场 HDU 6162 Ch’s gift 树剖加主席树

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6162 题意:给出一棵树的链接方法,每个点都有一个数字,询问U->V节点经过所有路径中l < ...

  2. 在Xcode中使用自定义的代码片段提高效率

    拖动代码的时候按住option键,很难拖,注意方法:< 引用于:http://www.2cto.com/kf/201409/336245.html

  3. Python+Selenium 自动化实现实例-Xpath捕捉元素的几种方法

    #coding=utf-8import timefrom selenium import webdriverdriver = webdriver.Chrome()driver.get("ht ...

  4. redis之（十二）redis数据的持久化

    ［一］redis的数据为什么要持久化 --->redis的存取数据性能高,是由于将所有数据都存储在内存中.当redis重启的时候,存储在内存中的数据就容易丢失. --->把redis作为数 ...

  5. hdu 2389(二分图hk算法模板)

    Rain on your Parade Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 655350/165535 K (Java/Ot ...

  6. SEO：查找网站的百度收录情况和如何让百度快速收录

    查询收录的工具地址: http://tool.chinaz.com/baidu/entry/ 如何让百度快速收录: 一.大家都熟知的百度网站提交,只需要提交网站的首页即可.以前做完这一步就被百度收录的 ...

  7. Linus 谈软件开发管理经验

    原文出处: linuxtoday   译文出处:CSDN // 伯乐在线转注:英文原文写于 2011 年 导读:没有人比Linus Torvalds更了解软件开发项目管理中的酸甜苦辣了.作为Linux ...

  8. Go语言用mock server模拟调用(httptest)

    mock是个好东东, 在大项目或大公司,很实用, 因为很多环境不是随时在开发环境可得的. package main import ( "testing" "net/htt ...

  9. （翻译）一起使用 .NET 和 Docker——DockerCon 2018 更新

    原文:https://blogs.msdn.microsoft.com/dotnet/2018/06/13/using-net-and-docker-together-dockercon-2018-u ...

  10. Java篇：IO流

    流(IO) 四个基本流: InputStream(输入字节流).OutputStream(输出字节流).writer(输出字符流).reader(输入字符流)-四个基本流都是抽象类不能实例化,固只能用 ...