码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-09-10 11:43:37      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:

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

  首先要获得数据。一般通过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> 

 

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

 

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

标签:

原文地址:http://www.cnblogs.com/laonniudajiangtang/p/5842857.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!