JavaWeb(ajax实现分页)

星光下的寂寞267

已于 2022-03-28 22:24:40 修改

阅读量244

点赞数

文章标签： java

于 2022-03-28 22:06:31 首次发布

本文链接：https://blog.csdn.net/weixin_64072273/article/details/123807665

版权

一、什么是ajax

ajax（Asynchronous JavaScript And XML）即异步JavaScript和XML，它是一种用于创建快速动态网页的技术。作用是通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

二、ajax实现方式

这里我们不做原生ajax的介绍，因为JQuery对ajax进行了封装。可以用少量的代码实现原生ajax的功能，同时又帮助我们解决了浏览器的兼容问题，没有道理不选它。
　　$.ajax是对ajax最基础的封装，来看一个简单例子

$.ajax({
    type:"POST",
    url:"${pageContext.request.contextPath}/user/deleteAll",
    data:{userList:userList.toString()},
    success:function () {
        alert("删除数据成功！");
        location.reload();
    },

关键参数介绍：
method：数据的提交方式
url：数据的提交url
async：是否支持异步刷新，默认是true
data：需要提交的数据
dataType：服务器返回数据的类型，例如xml,String,Json等
success：请求成功后的回调函数
error：请求失败后的回调函数

三、Aiax实现分页

public  class ArrayListHandler implements ResultSetHandler<List<Area>> {
    public List<Area> handle(ResultSet rs) throws SQLException{
        //定义一个大的结果集
        List<Area> areas  = new ArrayList<Area>();
        //定义一个小的实体对象
        Area area = null;
        //从结果集中取对应的字段
        while(rs.next()){
            area =  new Area(rs.getString("code"), rs.getString("name"), rs.getInt("layer"));
            areas.add(area);
        }
          return areas;
      }

}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

<script type="text/javascript">
   //页面载入函数
   $(function(){
       //默认显示第1页
       myf('a');
   })
   //扩大作用域
   var pageIndex;
   var max;
   //写一个方法专门控制分页
   function myf(type){
       if(type=='a'){
           //首页
           pageIndex=1;
       }
       else if(type=='b'){
           //上一页
           if(pageIndex>1){
               pageIndex--;
           }
           else{
               alert("兄die，已经是第一页了嘞");
           }
       }
       else if(type=='c'){
           //下一页
           if(pageIndex<max){
               pageIndex++;
           }
           else{
               alert("兄die，已经是最后一页了嘞");
           }
       }
       else{
           //末页
           pageIndex=max;
       }
       //ajax
       $.post("page.do", {pid:pageIndex}, function(data) {
           //用*分割
           var x=data.split("*");
           //x[0]代表json格式的对象数组字符串
           //x[1]代表max值
           //将json格式的对象数组字符串-->js的对象数组
           var ss=$.parseJSON(x[0]);
           //给max赋值
           max=parseInt(x[1]);
           var sb="<table border=\"1px\"><tr align='center'><td>商品序号</td><td>商品名称</td><td>商品图片</td></tr>";
           //循环遍历
           $.each(ss, function(i, g) {//下标，元素=对象
               sb+="<tr align='center'>";
               sb+="<td>"+g.gid+"</td>";
               sb+="<td>"+g.gname+"</td>";
               sb+="<td><img src='"+g.gpath+"'/></td>";
               sb+="</tr>";
           })
           sb+="</table>";
           sb+="["+pageIndex+"/"+max+"]";
           //给div赋值
           $("#aa").html(sb);
       })
   }
</script>
</head>
<body>
   <center>
       <img src="images/17.jpg">
       <input>
       <div id="aa"></div>
       <div>
           <a href="javascript:myf('a')">首页</a> 
           <a href="javascript:myf('b')">上一页</a> 
           <a href="javascript:myf('c')">下一页</a> 
           <a href="javascript:myf('d')">末页</a> 
       </div>
   </center>
</body>
</html>