jquery+ajax实现常见电商网站页面显示时滚动条滚到最低端自动从服务器异步加载下一页内容

本文链接：https://blog.csdn.net/sudo5zzb/article/details/49851421

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="html/text;charset=utf-8 "/>
   <script type="text/javascript" src="jquery-1.11.2.js"></script>
    <style type="text/css">
    #dialog{
       text-align: center;
       height: 50px;
       background-color: LightGray;
    }
       #page{
          text-align: center;
          height: 750px;
        background-color: gray;
       }
      #head{
         background-color: LightGray;
         text-align: center;
      }
    </style>
    <script type="text/javascript">
    $(function(){
//滚动条分页显示功能
/*
keyword="";//记录当前检索关键字
type="";//记录当前检索类型
page="1";//当前页吗
pagesize="6";//记录每页大小
flag="";//区分当前检索类型0代表分类，1代表关键字
state="";//后面是否还有数据需要向服务器请求
pattern="0";//搜索模式 0代表默认搜索1,2代表按照价格升降序3,4代表销量升降序
state="1";//数据是否取出完毕0代表取出完毕，1代表
flag="";//分类还是关键字1代表关键字0代表分类
//服务器端goodsServlet可以根据传递过来的keyword,type,page,pagesize,pattern来检索数据库返回json 格式的List<Goods> goods字符串
//下面为必要方法的编写
//处理商品按照什么标准排序设置pattern
   $("#b1").click(function() {
       if (pattern != 0) {
           pattern = 0;
           page = 1;
       } else {
           page = 1;
       }
       resortGoods();
   });

   $("#b2").click(function() {
       if ((pattern != 1) && (pattern != 2)) {
           pattern = 1;
           page = 1;
       } else if (pattern == 1) {
           pattern = 2;
           page = 1;
       } else {
           pattern = 1;
           page = 1;
       }
       resortGoods();
   });

   $("#b3").click(function() {
       if ((pattern != 3) && (pattern != 4)) {
           pattern = 3;
           page = 1;
       } else if (pattern == 3) {
           pattern = 4;
           page = 1;
       } else {
           pattern = 3;
           page = 1;
       }
       resortGoods();
   });

//下面方法为根据现有的参数访问服务器检索出需要页码的数据
function resortGoods() {
   //首先清空显示区域的旧内容
   $("#page").empty();//删除#page的子元素
   $("#page").remove();//删除#page本身
   var dataStr = null;
   // 根据flag即当前搜索是关键字还是分类进行不同请求
   if (flag == 1) {
       dataStr = "method=keywordGoods&page=" + page + "&pagesize=" + pagesize + "&pattern=" + pattern + "&keyword=" + keyword;
   } else {
       dataStr = "method=sortGoods&page=" + page + "&pagesize=" + pagesize + "&pattern=" + pattern + "&goodsType=" + goodsType;
   }
   $.ajax({
   type : "POST",
   url : "GoodsServlet",
   data : dataStr,
   dataType : "json",
   success : function(goods) {
       if (goods[0] != null) {
           state = 1;
           var html = "\n";
           html += '</div>从服务器查询出的内容goods内容</div>';
           $("body").append(html);//将内容显示到页面
           resetPattern();

       } else {
           state = 0;
       }
       //此处可以插入上面动态生成的某些标签的事件
   }
   });

}
// 根据ajax的返回数据goods重新设置页面显示
function resetHtml(goods) {
   // 首先清空旧的内容区
   page = 1;
   $("#page").empty();//删除#page的子元素
   $("#page").remove();//删除#page本身
   //此处删除其他旧的显示内容
   if (goods[0] != null) {
       state = 1;
       var html = "\n";
       $("body").append(html);//将内容显示到页面
       }
   } else {
       state = 0;
   }
//此处可以插入上面动态生成的某些标签的事件
}
//当点击关键字检索按钮之后的处理
$("#keyword-button").click(function(){
    keyword=$("#keyword-input").val();
    flag=1;
$.ajax({
       type : "POST",
       url : "GoodsServlet",
       data : "method=keywordGoods&page=" + page + "&pagesize=" + pagesize + "&pattern=" + pattern + "&keyword=" + $("#ikeywordinput").val(),
       dataType : "json",
       success : function(goods) {
           if(goods[0]!=null){}
           resetHtml(goods);
       }
       });

// 点击分类列表触法事件
   $(".isortlista").click(function() {
       goodsType = $(this).attr("type");
       flag = 0;
       $.ajax({
       type : "POST",
       url : "GoodsServlet",
       data : "method=sortGoods&page=" + page + "&pagesize=" + pagesize + "&pattern=" + pattern + "&goodsType=" + $(this).attr("type"),
       dataType : "json",
       success : function(goods) {
           resetHtml(goods);
       }
       });
   });
});
// 视图触底分页操作
   $(window).scroll(function() {
           if ($(document).height() == ($(this).height() + $(this).scrollTop())) {
               if (state == 1) {
                   //关键字检索
                   if (flag == 1) {
                       page++;
                       $.ajax({
                       type : "POST",
                       url : "/JDWeb/GoodsServlet",
                       data : "method=keywordGoods&page=" + page + "&pagesize=" + pagesize + "&pattern=" + pattern + "&keyword=" + keyword,
                       dataType : "json",
                       success : function(goods) {
                           if (goods[0] != null) {
                               html = "\n";
                               html+="<div>goods内容显示</div>"
                               }
                               $("#body").append(html);

                           } else {
                               state = 0;// 数据全部取出不需要再次请求服务器
                           }
                       //这里可绑定新标签某些事件处理
                       }
                       });
                   }

                   // 分类检索
                   else if (flag == 0) {
                       page++;
                       $.ajax({
                       type : "POST",
                       url : "/JDWeb/GoodsServlet",
                       data : "method=sortGoods&page=" + page + "&pagesize=" + pagesize + "&pattern=" + pattern + "&goodsType=" + goodsType,
                       dataType : "json",
                       success : function(goods) {
                           if (goods[0] != null) {
                               html = "\n";
                           html+="<div>goods内容显示</div>"
                               }
                               $("body").append(html);
                           } else {
                               state = 0;// 数据全部取出不需要再次请求服务器
                               }
                           }
                           //这里可绑定新标签某些事件处理
                       }
                       });
                   }
               }
           }
   });

*/

});

    </script>

</head>
<body>
<div id="head">
   <input id="keyword-input" type="text"></input><input id="keyword-button" type="button" value="关键字检索"></input><br>
    <input id="type-input" type="text"></input><input id="type-button" type="button" value="类型检索"></input>
    <br><br>
    <button id="b1">默认排行</button>
    <button id="b2">评价排行</button>
    <button id="b3">价格排行</button>
</div>
</body>
</html>