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

1、下载json2html>>

2、制作好模板、准备好json数据、启动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>json2html</title>
<script type="text/javascript" src="json2html.js"></script>
</head>
<body>
<script type="text/javascript">
//html模板格式
var transform = {‘tag‘:‘p‘,‘html‘:‘${name} (${age})‘};

//json数据
var data = [
    {‘name‘:‘Bob‘,‘age‘:40},
    {‘name‘:‘Frank‘,‘age‘:15},
    {‘name‘:‘Bill‘,‘age‘:65},
    {‘name‘:‘Robert‘,‘age‘:24}
];
//启动
        document.write(json2html.transform(data,transform));
</script>
</body>
</html>

输出html代码:

<p>Bob (40)</p>
<p>Frank (15)</p>
<p>Bill (65)</p>
<p>Robert (24)</p>
时间: 2024-10-20 03:12:37

利用json2html将json数据填充到html模板的相关文章

Struts2.5 利用Ajax将json数据传值到JSP

AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. JSON JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范

MVC客户端使用 Mustache.js把json数据填充到模版中

使用Mustache的好处是:可以把一些反复用到的html部分定义成Mustache模版,以便多次使用.使用Mustache的大致步骤是: →从后台拿到json数据 →获取前台页面预先定义好Mustache模版(占位符必须和从后台传来的的字段或属性名一致) →遍历每行的json数据,使用Mustache.render(template, row)方法把json数据填充到对应的占位符,得到html内容 →把html内容追加到页面的某个位置 显示一个足球俱乐部的下拉框: 当点击下拉框,显示该俱乐部的

SpringBoot 03_利用FastJson返回Json数据

自上一节:SpringBoot 02_返回json数据,可以返回json数据之后,由于有些人习惯于不同的Json框架,比如fastjson,这里介绍一下如何在SpringBoot中集成fastjson来实现对数据的json序列化. 在使用fastjson时,可以有以下两种集成方式,但是都需要引入fastjson的依赖包 1:引入fastjson依赖包 <dependency> <groupId>com.alibaba</groupId> <artifactId&g

利用Gson将JSON数据进行格式化(pretty print)

我们可以利用Gson包将String类型的JSON数据进行格式化. Gson gson = new GsonBuilder().setPrettyPrinting().create(); JsonParser jp = new JsonParser(); JsonElement je = jp.parse(uglyJSONString); String prettyJsonString = gson.toJson(je); 使用 new GsonBuilder.setPrettyPrinting

利用AXIS2传递JSON数据

Axis2是目前比较流行的WebService引擎.WebService被应用在很多不同的场景.例如,可以使用WebService来发布服务端 Java类的方法,以便使用不同的客户端进行调用.这样可以有效地集成多种不同的技术来完成应用系统.WebService还经常被使用在SOA中,用于 SOA各个部分交换数据.本文重点在于如何使用AXIS2引擎实现传递JSON数据. 博主本人由于项目需要,所以就查找了关于Web Service的文章.但碍于博主对Web的不熟,所以很多也就是按照网上教程做的.或

利用Python读取json数据并求数据平均值

要做的事情:一共十二个月的json数据(即12个json文件),json数据的一个单元如下所示.读取这些数据,并求取各个(100多个)城市年.季度平均值. { "time_point": "2014-01", "area": "***", "aqi": "71", "pm2_5": "47", "pm10": "69&

利用请求的JSON数据创建图形图层

先看效果图: 包含三个部分:信息窗口(标题是要素的某个属性信息,其余是感兴趣的属性信息).图上图形按照某一属性大小不一显示,图例 1.创建底图用于存放以上三部分: "esri/Map","esri/views/MapView" var map = new Map({ basemap:"dark-gray"}); var view = new MapView({ map:map, container:"viewDiv", cen

android 利用socket 发送Json数据demo

客户端代码: package com.yqq.jsonclienttest; import java.io.IOException; import java.io.OutputStream; import java.net.InetAddress; import java.net.Socket; import java.net.UnknownHostException; import org.json.JSONException; import org.json.JSONObject; impo

MVC中利用ViewBag传递Json数据时的前端处理方法

用viewBag传递Json字符串到前端时,json字符串中的“会被转义为& quot,前端处理方法为@Html.Raw(Json.Encode(ViewBag.Data)),再用eval()函数解析得到json对象:var data=eval("(" + @Html.Raw(Json.Encode(ViewBag.Data)) + “)”); 如何传递的是json对象则前端使用用 jsonData=eval( @Html.Raw(ViewBag.jsonData)); 原文地