一、怎样实现动态添加数据呢？
首先要获得数据。一般通过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>
效果图跟第一个效果图一样。这里不赘述
时间： 2024-11-12 14:39:44