ajax按楼层加载数据
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ajax按楼层加载数据</title>
<style>
* {
box-sizing: border-box;
outline: none;
}
.head{
width: %;
height: 500px;
}
p {
margin: .5em;
word-break: break-all;
}
.container {
position: relative;
width: 700px;
height: 500px;
margin: auto;
padding-right: 200px;
}
.content {
width: %;
height: %;
border: 1px solid #ccc;
}
.content-opt {
position: absolute;
top: ;
right: ;
width: 200px;
height: %;
}
.content-text {
height: calc(% - 30px);
margin-bottom: 30px;
border: 1px solid #ccc;
overflow: auto;
}
.content-input {
position: absolute;
bottom: ;
width: %;
height: 30px;
border: 1px solid #ccc;
}
.content-input input {
width: %;
padding: 2px;
border-radius: 5px;
}
.content-input button {
padding: 3px 10px;
border: none;
border-radius: 5px;
background: rgb(, , );
}
</style>
<body style="background: #ccc;">
<div class="head"></div>
<!--楼层1开始-->
<div class="floor" id="floor1" style="height: 1500px;"> </div>
<!--楼层1结束-->
<!--楼层2开始-->
<div class="floor" id="floor2" style="height: 1500px;"> </div>
<!--楼层2结束--> <script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){ var successload = new Array(); //已加载楼层
//滚动条滚动
$(window).scroll(function () { scrollload(); });
//滚动条滚动事件
function scrollload() {
var scrolltop = $(this).scrollTop();
//当内容滚动到底部时加载新的内容
$(".floor").each(function (index, value) {
if (scrolltop + $(window).height() >= $(this).offset().top && $(this).offset().top + $(this).height() >= scrolltop) {
if ($.inArray(index + , successload) == -) {
loadFloor(index + );
successload.push(index + );
}
}
});
}
//楼层商品绑定
function loadFloor(loadIndex) {
if (loadIndex == ) {
//$('#floor1').append("楼层一");
$.ajax({
type: "POST",//请求方式
url: "floor1.json",//地址，就是json文件的请求路径
dataType: "json",//数据类型可以为 text xml json script jsonp
success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
$.each(result,function(index,obj){
if(obj['sex']==){
$("#floor1").append(
"<div class='product'>"
+"<div class='p1 p'>"+obj['name']+"</div>"+
"</div>");
} });
}
});
}
if (loadIndex == ) {
//$('#floor2').append("楼层二");
$.ajax({
type: "POST",//请求方式
url: "floor1.json",//地址，就是json文件的请求路径
dataType: "json",//数据类型可以为 text xml json script jsonp
success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
$.each(result,function(index,obj){
if(obj['sex']==){
$("#floor2").append(
"<div class='product'>"
+"<div class='p1 p'>"+obj['name']+"</div>"+
"</div>");
} });
}
}); }
} });
</script>
</body>
</html>
floor1.JSON数据：
[
{
"name":"张国立",
"sex":
},
{
"name":"张铁林",
"sex":
},
{
"name":"邓婕",
"sex":
},
{
"name":"成龙",
"sex":
},
{
"name":"张杰",
"sex":
},
{
"name":"尚雯婕",
"sex":
}
]
ajax按楼层加载数据的更多相关文章
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据
瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...
- 巧用ajax请求服务器加载数据列表时提示loading
我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading... 要在页面需要加载的JS文件: < ...
- Ajax页面的加载数据与删除
1.数据库找一张表: 颜色表2.主页面主页面的代码用到tbody:TBODY作用是:可以控制表格分行下载,从而提高下载速度.(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部 ...
- Ajax 滚动异步加载数据
第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...
- Ajax动态滚动加载数据
看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现. 最开始在CSDN上写了一版,功能比较简单,今天又增加了一个小功能:翻页到指定 ...
- php ajax 下拉加载数据
视图 <html> <head> <title>健康知识</title> <script type="text/javascript&q ...
- highcharts Ajax 动态请求加载数据
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- thinkphp5.0调用ajax无刷新加载数据
控制器层那边就是调数据返回,这里不再赘述,视图层页面ajax部分写法如下 function shanchu(obj) { var code = $(obj).attr("code" ...
随机推荐
- hdu3336 Counting the string kmp的next数组的应用
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/3336/ 题意就是要求一个字符串的所有前缀在字符串中出现的次数之和,我们容易想到kmp中的next数组,next[ ...
- RabbitMQ 在Ubuntu18.04上的安装
1.安装erlang由于rabbitMq需要erlang语言的支持,在安装rabbitMq之前需要安装erlang sudo apt-get install erlang2.安装Rabbitmq更新源 ...
- 第八周Java实验作业
实验六 接口的定义与使用 实验时间 2018-10-18 1.实验目的与要求 (1) 掌握接口定义方法: 声明: public interface 接口名 {...} 接口体中包含常量定义和方法定义 ...
- 5L-链表导论心法
链表是比数组稍微复杂一点的数据结构,也是两个非常重要与基本的数据结构.如果说数组是纪律严明排列整齐的「正规军」那么链表就是灵活多变的「地下党」. 关注公众号 MageByte,有你想要的精彩内容. 链 ...
- 【干货】Keras学习资源汇总
目录: Keras简介 Keras学习手册 Keras学习视频 Keras代码案例 Keras&NLP Keras&CV Keras项目 一.Keras简介 Keras是Python中 ...
- SVM多核学习方法简介
作者:Walker SVM是机器学习有监督学习的一种方法,常用于解决分类问题,其基本原理是:在特征空间里寻找一个超平面,以最小的错分率把正负样本分开.因为SVM既能达到工业界的要求,机器学习研究者又能 ...
- CUDA编程入门
CUDA是一个并行计算框架.用于计算加速.是nvidia家的产品.广泛地应用于现在的深度学习加速. 一句话描述就是:cuda帮助我们把运算从cpu放到gpu上做,gpu多线程同时处理运算,达到加速效果 ...
- 自动化运维Ansible之常用模块
目录 0.Ansible模块语法 1.Command模块 2.Shell模块 3.Scripts模块 4.Copy模块 5.File模块 6.Yum模块 7.Service模块 8.Cron模块 9. ...
- Java工程师技能点梳理
从个人技术积累的角度,来看看一名合格的Java工程师在面试时所需要的知识技能. 1.基本语法 这包括static.final.transient等关键字的作用,foreach循环的原理等等.今天面试我 ...
- windows server 2016 远程桌面mstsc DPI（更改文本、应用和其他项目大小） 设置
windows server 2016 远程桌面mstsc DPI 设置 在高分辨率机器2K,4K,8K,登入使用window远程桌面mstsc时,登入后虽然分辨率变成了和cilent一样分辨率 但是 ...