啊打发
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//点击按钮异步加载数据，并在content中显示
$("#btn").click(function(){
/**** $.ajax()方法 ***
// $.ajax({
// url: "data.json",//"发送的请求地址",
// type:"get",//"请求方式"
// data:null,//"要发送的数据",
// dataType: "json",
// beforeSend: function(data) { // 发送请求前执行的代码
// $(".loading").show();
// },
// success: function(data) {// 发送成功后执行的代码
// dealData(data);
// },
// complete:function(){
// $(".loading").hide();
// },
// error: function(XMLHttpRequest, textStatus, errorThrown) {// 请求失败执行的代码
// alert("错误信息:"+textStatus);
// }
// });
//
/**** $.getJSON()方法 ****/
// $.getJSON("data.json",function(data){
// dealData(data);
// })
/**** $.get()方法 ****/
// $.get("data.json",{},function(data){
// dealData(data);
// },"json");
/**** $.post()方法 ****/
$.post("data.json",{},function(data){
dealData(data);
},"json")
});
function dealData(data){
if(typeof data != "undefined"){
$(data.news).each(function(i){
$("#newsList").append("<li><a href=‘#id="+data.news[i].id+"‘>"+data.news[i].title+"["+data.news[i].date+"]</a></li>")
});
}
}
});
</script>
<body> <div id="newsBox"> <div class="top">新闻列表</div> <ul id="newsList"> <li><a href="#">新闻标题1[11-27]</a></li></li> <li><a href="#">新闻标题2[11-23]</a></li></li> <li><a href="#">新闻标题3[11-23]</a></li></li> <li><a href="#">新闻标题4[11-18]</a></li></li> <li><a href="#">新闻标题5[11-11]</a></li></li> <li class="loading hidden" style="display: none">loading..</li> </ul> <div id="btn">查看更多</div>
原文：http://www.cnblogs.com/xuerong/p/4976196.html