如何将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就到这里,大家去试试吧



猜你喜欢

转载自blog.csdn.net/qiushi888/article/details/50427255

相关文章