ajax的项目实操（只用于记录部分文件未引入）
<!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和$.post没有请求失败处理，如要其他请求状态处理用$.ajax
$.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>
ajax的项目实操（只用于记录部分文件未引入）的更多相关文章
- 使用Jenkins与Docker持续集成与发布NetCore项目(实操篇)
使用Jenkins与Docker持续集成与发布NetCore项目(教程一) 原文地址:https://www.cnblogs.com/Jackyye/p/12588182.html 基本环境 该教程的 ...
- Linux基础实操二
实操一: 1) 新建用户natasha uid为1000,gid为555,备注信息为“master” 2) 修改natasha用户的家目录为/Natasha 3) 查看用户信息配置文件的最后一行 ca ...
- 南方IT学校期末PCB结课项目考试(实操)说明书
南方IT学校期末结课项目考试(实操)说明书(一) 课程:<印制电路板设计技术>(二) 项目:笔记本电脑电源适配器的印制电路板设计(三) 背景说明:如今笔记本已经进入千家万户,作为给电脑充电 ...
- 从零实操基于WSL2 Docker部署Asp.Net Core项目
前言 平日在公司里都是基于阿里Teambition中的飞流进行Docker部署Api项目或服务,已经习惯了那一套成熟的操作流程,开发和部署确实快捷方便,但是还没在自己的电脑上进行操作过,特别是Wind ...
- SFUD+FAL+EasyFlash典型场景需求分析，并记一次实操记录
SFUD+FAL+EasyFlash典型场景需求分析:用整个flash存储数据,上千条数据,读取得时候用easyflash很慢,估计要检索整个flash太慢了. 改进方法:分区检索. 1存数据时,根据 ...
- ubuntu 18.04 搭建flask服务器(大合集，个人实操)
ubuntu 18.04 搭建flask服务器(大合集) Ubuntu python flask 服务器 本次使用的Ubuntu版本为:Ubuntu 18.04.5 LTS (GNU/Linux 4. ...
- [Django框架 - 静态文件配置、request对象方法初识、 pycharm链接数据库、ORM实操增删改查、django请求生命周期]
[Django框架 - 静态文件配置.request对象方法初识. pycharm链接数据库.ORM实操增删改查.django请求生命周期] 我们将html文件默认都放在templates文件夹下 将 ...
- RFC2889广播时延测试——网络测试仪实操
一.简介 RFC 2889为LAN交换设备的基准测试提供了方法学,它将RFC 2544中为网络互联设备基准测试所定义的方法学扩展到了交换设备,提供了交换机转发性能(Forwarding Perform ...
- CS内网横向移动 模拟渗透实操 超详细
@Webkio 前言: 最近在跟朋友搞一些项目玩,所以最近没怎么更新内容接下来我将在虚拟中模拟内网多层靶场,进行内网渗透实验,超详细,适合小白.本文仅供网安学习,不可利用于未授权渗透工作中,否则后果自 ...
随机推荐
- Android抽屉效果 DrawerLayout 入门经验总结
今天试了试这个抽屉布局的效果,结果很崩溃无语 网上很多资料都千篇一律,感觉都有问题,下面总结下几点经验: 先上个效果图: 1. layout 布局文件中怎么写: <android.suppor ...
- magento中对获取的数据在前台进行分页显示
1.数据加载类class Bf170_Bf170Logistics_Block_Inquiry_Index extends Mage_Core_Block_Template { publ ...
- 关于java的设计模式（转）
设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
- crontab 的例子
0 5 * * * python /home/iscas/xiujinnews/wangyi.py >>/home/iscas/xiujinnews/l og/wangyi.log 2&g ...
- javaWEB总结(16):jsp错误页面的处理
前言 网站上线后,jsp页面上有时会出现不友好的错误信息,我们需要展示给用户更加友好的页面.这时候要用到page标签的errorPage和isErrorPage. errorPage 指定当前页面出现 ...
- RMIC命令提示找不到类的问题
问题环境: RMI服务类已经写好. 目录结构: -- A ----- B -------- C ------------- RMIImpl.class RMIImpl.java : package B ...
- openstack私有云布署实践【0 前言】
管理控制层面示图: 其实在修改这个布署文档是,我发现当时生产中的布署已经严重偏离了openstack高可用的指导思想.我们自己实践的高可用其实是适应自己的架构而做的调整,因为我们现实手头上中没有比较符 ...
- 使用PIE对IE进行CSS3兼容介绍和经验总结
国外团队开发的兼容插件,去年做项目时才发现,非常强大 主角:PIE.js , PIE.htc 两种方法可以实现 官方网站:http://css3pie.com/ 演示地址:http://css3pie ...
- CodeForces 699A Launch of Collider
枚举相邻两个$a[i]$与$a[i+1]$,如果$s[i]=R$并且$s[i+1]=L$,那么$i$和$i+1$会碰撞,更新答案. #pragma comment(linker, "/STA ...
- js--事件对象的理解1
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...