比如这样的JSON数据:
{
"title":"xxx",
"context":"demodemodemo",
"author":"ringotc"
}
要转换成:
<div class="post">
<h1>xxx</h1>
<div class="context">
demodemodemo
</div>
<p>Author:ringotc</p>
</div>
如何把JSON数据优雅的(可移植性、简约、明了)的转换成HTML标签?
Tempo ( http://twigkit.github.io/tempo/ )
jQuery 或者 JSLite.io 简单快速的实现
js
var json ={ "title":"xxx", "context":"demodemodemo", "author":"ringotc" } $(' <div class="post"> <h1>'+json.title+'</h1> <div class="context">'+json.context+'</div> <p>'+json.author+'</p> </div> ').append('body')
https://github.com/moappi/json2html
看看这个是否适合你。
还可以使用mustache+jquery:
http://mustache.github.io/
"results":{
"title":"xxx",
"context":"demodemodemo",
"author":"ringotc"
}
$.ajax({
type:"POST",
url:"/app/info",
success:function(data){
var template='{{#results}}<div class="post"><h1>{{title}}</h1><div class="context">{{context}}</div><p>{{author}}</p></div>{{/results}}'; //result是你的json数据游标
var html=Mustache.render(template,data);
$("#info").html(html);
},
dataType:"json"
});