H5动态添加数据-博客园老牛大讲堂

一、怎样实现动态添加数据呢？

　　首先要获得数据。一般通过ajax获得数据（参考我写的ajax跨域通信）。之后动态添加数据。

　　下面我从简单到复杂介绍一下动态添加数据。

例子一：首先编写json数据，然后动态添加数据。

<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="../H/js/jquery-3.0.0.min.js"></script>
    </head>

    <body>
        <div>博客园老牛大讲堂</div>
        <!--<ul><li>内容一</li><li>内容二</li><li>内容三</li></ul>-->
        <ul id="first">
            
        </ul>
        <script>
            var data = [{
                "name": "老牛大讲堂1"
            }, {
                "name": "老牛大讲堂2"
            }, {
                "name": "老牛大讲堂3"
            }, {
                "name": "老牛大讲堂4"
            }]
            var str = "<li>"+data[0].name+"</li><li>"+data[1].name+"</li><li>"+data[2].name+"</li><li>"+data[3].name+"</li>";//内容
            $("#first").append(str);//append添加数据
        </script>
    </body>
</html>

运行结果：

 

 例子二：下面的例子，我把json数据放到其他文件夹，并且动态的添加若干的数据。

 

<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="../H/js/jquery-3.0.0.min.js"></script>
    </head>

    <body>
        <div>博客园老牛大讲堂</div>
        
        <ul id="first">
            
        </ul>
        <script>
             $.ajax({//这个是ajax请求
                url:"data.json",
                 type:"POST",
                 
                 success:function(data){
                     for(var i=0;i<data.length;i++){//data.length是获取data的长度。for循环
                         $("#first").append("<li>"+data[i].name+"</li>");//如果添加class或者id内容要加单引号例如：$("#first").append("<li class='a'>"+data[i].name+"</li>");
                     }
                 }
             });
        </script>
    </body>
</html> 

 

效果图跟第一个效果图一样。这里不赘述

 

posted @ 2016-09-10 10:05  老牛大讲堂  阅读(6536)  评论(0)  编辑  收藏  举报