javascript - 如何优雅的把JSON转换成HTML标签？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 如何优雅的把JSON转换成HTML标签？

伊谢尔伦 2017-04-10 14:25:09

[JavaScript讨论组]

696

比如这样的JSON数据：

{
    "title":"xxx",
    "context":"demodemodemo",
    "author":"ringotc" 
}

要转换成：

<p class="post">
    <h1>xxx</h1>
    <p class="context">
        demodemodemo
    </p>
    <p>Author：ringotc</p>
</p>

如何把JSON数据优雅的（可移植性、简约、明了）的转换成HTML标签？

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(4)

天蓬老师2017-04-10 14:27:09 4楼

https://github.com/moappi/json2html
看看这个是否适合你。

赞 +0

添加回复

大家讲道理2017-04-10 14:27:09 3楼

Tempo ( http://twigkit.github.io/tempo/ )

赞 +0

添加回复

PHP中文网2017-04-10 14:27:09 2楼

还可以使用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}}<p class="post"><h1>{{title}}</h1><p class="context">{{context}}</p><p>{{author}}</p></p>{{/results}}'; //result是你的json数据游标
             var html=Mustache.render(template,data);
             $("#info").html(html);
        },
        dataType:"json"
    });

赞 +0

添加回复

大家讲道理2017-04-10 14:27:09 1楼

jQuery 或者 JSLite.io 简单快速的实现

jsvar json ={
    "title":"xxx",
    "context":"demodemodemo",
    "author":"ringotc" 
}


$('

<p class="post"> <h1>'+json.title+'</h1> <p class="context">'+json.context+'</p> <p>'+json.author+'</p> </p>

').append('body')

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>