ajax的项目实操（只用于记录部分文件未引入）
浏览数：61 /
时间：2015年06月09日
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link href="index.css" type="text/css" rel="stylesheet"> <title>桃花官网移动端首页</title> </head> <body> <div class="wrap"> <!--头部--> <div id="header"> <div class="top_bar"> <a class="register" href="/index.html"><返回</a> <img src="public/images/news/news_tit.png" class="news_tit"> <div class="nav"> <img src="public/images/index/nav_icon.png"> </div> <!--导航展开--> <div class="child_nav"> <a href="#" class="bt_no">新闻</a> <a href="#">特色</a> <a href="#">职业</a> <a href="#">攻略</a> <a href="#" class="bb_no">论坛</a> </div> </div> </div> <!--新闻公告--> <div class="news_info"> <ul class="list"> <li> <a href="#"> <img src="public/images/index/z_x.png" border="0"> <div>至尊争霸赛决战圣诞夜 登陆送豪礼</div> </a> </li> <li> <a href="#"> <img src="public/images/index/x_w.png" border="0"> <div>新服"天涯初雪"今日12:00温馨开启</div> </a> </li> <li> <a href="#"> <img src="public/images/index/g_g.png" border="0"> <div>2014年12月19日Ver0.7.500-Ver0.7.501版本...</div> </a> </li> <li> <a href="#"> <img src="public/images/index/z_t.png" border="0"> <div>圣诞大作战 大礼享不停！</div> </a> </li> <li> <a href="#"> <img src="public/images/index/m_t.png" border="0"> <div>【CBI游戏天地】桃花鬼马万圣节</div> </a> </li> <li> <a href="#"> <img src="public/images/index/z_x.png" border="0"> <div>至尊争霸赛决战圣诞夜 登陆送豪礼</div> </a> </li> <li> <a href="#"> <img src="public/images/index/x_w.png" border="0"> <div>新服"天涯初雪"今日12:00温馨开启</div> </a> </li> <li> <a href="#"> <img src="public/images/index/g_g.png" border="0"> <div>2014年12月19日Ver0.7.500-Ver0.7.501版本...</div> </a> </li> <li> <a href="#"> <img src="public/images/index/z_t.png" border="0"> <div>圣诞大作战 大礼享不停！</div> </a> </li> <li> <a href="#"> <img src="public/images/index/m_t.png" border="0"> <div>【CBI游戏天地】桃花鬼马万圣节</div> </a> </li> </ul> <!--<a href="#" class="more">查看更多></a>--> </div> <a href="#" id="more">下拉加载！</a><!--分享到--> <div id="share_box"> <h2 class="share_tit">分享到</h2> <a href="#"><img src="public/images/index/w_x.jpg" border="0"></a> <a href="#"><img src="public/images/index/t_x.jpg" border="0"></a> <a href="#"><img src="public/images/index/x_l.jpg" border="0"></a> <a href="#"><img src="public/images/index/k_j.jpg" border="0"></a> <a href="#"><img src="public/images/index/p_y.jpg" border="0"></a> </div> <!--联系方式--> <div id="contact"> <p><img src="public/images/index/pc.jpg" border="0" class="pc"><a href="http://www.leyoo.com/" target="_blank" class="pc_web">查看PC版本官网</a> <img src="public/images/index/telephone.jpg" border="0" class="telephone">客服电话：0755—86671177</p> </div> <!--版权信息--> <div id="footer"> <p>出版号：ISBN 978-7-900267-12-2 文网游备字[2011]C-RPG057号<br>粤网文［2013］0832-232号 增值电信业务经营许可证粤B2-20100197号<br>粤ICP备10046641号</p> </div> <!--返回顶部--> <a class="return_top" href="javascript:void(0);"><img src="public/images/index/return_top.png" border="0"></a> </div> <script src="jquery-1.7.2.min.js"></script> <script> $(function(){ var timer; $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); go_scroll(scrollTop,scrollHeight,windowHeight); }); function go_scroll(scrollTop,scrollHeight,windowHeight){ //下拉事件触发 window.clearInterval(timer); timer=setTimeout(function(){ if(scrollTop + windowHeight >= scrollHeight-60){ $("#more").html("加载中~") $.get("aa.xml",function(data,status){ $("#more").html("下拉加载~"); //模拟数据json var employees =‘{ "employees" : [‘ + ‘{ "a_href":"Bill" , "img_src":"Gates" , "content":"11111" },‘ + ‘{ "a_href":"Bill" , "img_src":"Gates" , "content":"222222" },‘ + ‘{ "a_href":"Bill" , "img_src":"Gates" , "content":"33333" },‘ + ‘{ "a_href":"George" , "img_src":"Bush" , "content":"44444" },‘ + ‘{ "a_href":"Thomas" , "img_src":"Carter" , "content":"55555" } ]}‘; var obj = eval ("(" + employees + ")"); write_ajax(obj); } ) }},500); } function write_ajax(obj){ if(jQuery.isEmptyObject( obj )){$("#more").html("没有内容了~"); return false}; var li_list = [], a_list = [], img_list = [], div_list = [], ajax_list=[]; $(obj.employees).each(function(i){//如果需要只进行一次页面重构就要拼写成字符串一次性append进去 li_list[i] = document.createElement("li"), a_list[i] = document.createElement("a"), img_list[i] = document.createElement("img"), div_list[i] = document.createElement("div"), a_list[i].setAttribute("href",obj.employees[i].a_href); div_list[i].innerHTML=obj.employees[i].content; img_list[i].setAttribute("src",obj.employees[i].img_src); a_list[i].appendChild(img_list[i]); a_list[i].appendChild(div_list[i]); li_list[i].appendChild(a_list[i]); $(".list").append(li_list[i]); }) }; }) </script> </body> </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
