如何将ajax得来json数据快速展示到html代码中？绝对干货

俗话说，分久必合，合久必分

什么东西都阻挡不了大势，俗话说，大势所趋就是这个道理

在多终端的环境下，以前让服务端比如php那些煞笔在页面上直接输出数据的年代早就过去啦，

什么？你们还这样做？

那就有人要问了，那现在流行什么呢？请容我细细道来

那就是数据和前端绝对的分开，服务器只负责提供 一串json数据，至于数据怎么展示，就交给前端啦，所以一个接口可以满足web，ios，android，等各种需求

哎呦，需求很强烈呀！

对于网页前端的我们，以前的那些遍历数据的操作就全部到我们手里了

所以各种

$("#xxx").val()
$("#xxx").html()
$("#xxx").attr()

就出现了，一个一个写，好烦啊

甚至还有数组，我们要这样

for(var i=0;i<len;i++) {
     $("<p>"+xx+"eee"+""+"</p>").apendTo(xxxx)
}

怎么办呢？能不能我只要写好一些属性，你就我自动给生成呢？

比如

<span data-name></span>

自动把json的里的name给塞进去，多舒服

下面楼主就给大家写一个插件

啥叫插件？就是插进去的一件东西。。。

有朋友说了？噢。。。那我也有。。。

jrender

一个基于jQuery的json数据快速展示系统

用法

html代码

<div class="info">
    <span render-html="weather"></span>
    <ul render-loop="seven_days">
            <li render-html="seven_days.weather"></li>
    </ul>
</div>

html代码

var data = {
    weather:'晴',
    seven_days:[
        {
            weather:'阴'
        },
        {
            weather:'雾霾'
        },
        {
            weather:'小雨'
        }
    ]
};
$(".info").renderValues(data);

说明

1.所有的数据展示都是在某一个标签内 比如

<span render-html="username"></span>

循环类型的只循环，子元素的第一个元素，所以尽量套一个div进去

<div render-loop="seven_days">
    <div>
        <span render-html="seven_days.temperature"></span>
        <span render-html="seven_days.weather"></span>
    </div>
</div>

错误的写法

<div render-loop="seven_days">
    <span render-html="seven_days.temperature"></span>
    <span render-html="seven_days.weather"></span>
</div>

2.可以render的类型有如下一个

render-html, 
render-src, 
render-value, 
render-href, 
render-loop, 
render-attr(这个类型自定义属性例子:render-attr="userid=uid")

代码地址当然要在github上拉

https://github.com/suxianbaozi/jrender

ok就到这里,大家去试试吧