首页 > 代码库 > H5动态添加数据-老牛大讲堂
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>
效果图跟第一个效果图一样。这里不赘述
H5动态添加数据-老牛大讲堂
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。