html模板与json数据交互
阅读这篇文章后，对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的交互，如：
html模板与json数据交互的更多相关文章
- 移动端基于HTML模板和JSON数据的JavaScript交互
写本文之前,我正在做一个基于Tab页的订单中心: 每点击一个TAB标签,会请求对应状态的订单列表.之前的项目,我会在js里使用 + 连接符连接多个html内容: var html = ''; htm ...
- spring-boot json数据交互
SpringBoot学习之Json数据交互 最近在弄监控主机项目,对javaweb又再努力学习.实际的项目场景中,前后分离几乎是所以项目的标配,全栈的时代的逐渐远去,后端负责业务逻辑处理,前端负责数据 ...
- SpringMVC框架笔记02_参数绑定返回值文件上传异常处理器JSON数据交互_拦截器
目录 第1章 高级参数的绑定 1.1 参数的分类 1.2 数组类型的参数的绑定 1.3 集合类型的参数的绑定 第2章 @RequestMapping的用法 2.1 URL路径映射 2.2 请求方法限定 ...
- json数据交互
springmvc 的json数据交互 - 哎幽的成长 - CSDN博客--和老师讲课相同http://blog.csdn.net/u012373815/article/details/4720818 ...
- SpringMVC JSON数据交互
本节内容: @RequestBody @ResponseBody 请求json,响应json实现 前端可以有很多语言来写,但是基本上后台都是java开发的,除了c++(开发周期长),PHP和#Net( ...
- springMVC学习(11)-json数据交互和RESTful支持
一.json数据交互: json数据格式在接口调用中.html页面中较常用,json格式比较简单,解析还比较方便. 比如:webservice接口,传输json数据. springMVC进行json交 ...
- SpringMVC入门（二）—— 参数的传递、Controller方法返回值、json数据交互、异常处理、图片上传、拦截器
一.参数的传递 1.简单的参数传递 /* @RequestParam用法:入参名字与方法名参数名不一致时使用{ * value:传入的参数名,required:是否必填,defaultValue:默认 ...
- Spring MVC之JSON数据交互和RESTful的支持
1.JSON概述 1.1 什么是JSON JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式.它是基于JavaScript的一个子集,使用了C.C ...
- springmvc的json数据交互
准备 @RequestBody 作用: @RequestBody注解用于读取http请求的内容(字符串),通过springmvc提供的HttpMessageConverter接口将读到的内容(json ...
随机推荐
- BZOJ 4241: 历史研究——莫队 二叉堆
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4241 题意:N个int范围内的数,M次询问一个区间最大的(数字*出现次数)(加权众数),可以 ...
- 浅谈Javascript设计模式
什么是模式 模式是一种可复用的解决方案,可用于解决软件设计中遇到的常见问题. 也就是说用来解决常见问题的可复用的解决方案. 常见的js设计模式 Constructor(构造器)模式 Construct ...
- 使用Guava retryer优雅的实现接口重调机制
API 接口调用异常, 网络异常在我们日常开发中经常会遇到,这种情况下我们需要先重试几次调用才能将其标识为错误并在确认错误之后发送异常提醒.guava-retry可以灵活的实现这一功能.Guava r ...
- python之路——面向对象进阶
阅读目录 isinstance和issubclass 反射 setattr delattr getattr hasattr __str__和__repr__ __del__ item系列 __geti ...
- Centos7Yum安装配置指定版本nginx
1.安装 rpm -ivh http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.14.2-1.el7_4.ngx.x86_64.rpm 2.启 ...
- 处理form表单提交后返回值的处理办法【html5】
同事朋友ajax,最近在弄公司业务电话机,自主搭建,买的设备. 其中最主要功能是前端发起呼叫,通过浏览器触发设备进行呼叫功能,走后台呼叫还不行. 需求是这样的: 前端给设备ip发送特定的一段xml信息 ...
- CentOS7.5删除旧的内核
[root@localhost ~]# uname -r3.10.0-862.3.2.el7.x86_64 [root@localhost ~]# rpm -qa | grep kernelkerne ...
- Java网络编程一
1.InetAddress的应用 import java.util.List; import java.math.BigDecimal; import java.net.InetAddress; im ...
- 洛谷——P1113 杂务
P1113 杂务 题目描述 John的农场在给奶牛挤奶前有很多杂务要完成,每一项杂务都需要一定的时间来完成它.比如:他们要将奶牛集合起来,将他们赶进牛棚,为奶牛清洗乳房以及一些其它工作.尽早将所有杂务 ...
- 【ModelMap】jsp中显示springmvc modelmap传递的对象
最近在做一个小网站,功能非常基础,决定用springmvc搭建. 遇到一个问题,在controller向前端传值时,比如使用ModelMap传了一个字符串,modelmap.addattribute( ...