JavaWeb(ajax实现分页)

最新推荐文章于 2023-04-17 11:28:30 发布

এ 清ོ眸ꦿ℘゜

最新推荐文章于 2023-04-17 11:28:30 发布

阅读量106

点赞数

分类专栏： javaWeb 文章标签： ajax

本文链接：https://blog.csdn.net/qq_63845026/article/details/123799867

版权

javaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简介:

一：Ajax是什么?

ajax是只刷新局部页面的技术,全名是 Asynchr onous(异步的) JavaScript And Xml

JavaScript：更新局部的网页

XML：一般用于请求数据和响应数据的封装

XMLHttpRequest对象：发送请求到服务器并获得返回结果 ***Ajax技术的核心

CSS：美化页面样式

异步：发送请求后不等返回结果，由回调函数处理结果

二: Ajax的好处?

无刷新：不刷新整个页面，只刷新局部

无刷新的好处只更新部分页面，有效利用带宽，提高用户体验

三:如何使用ajax实现分页?

主界面：index.jsp

<%@ 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>
       <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>

业务逻辑层 Servlet PageServlet界面

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.zking.biz.GoodsBiz;
import com.zking.biz.IGoodsBiz;
import com.zking.entity.Goods;

@WebServlet("/page.do")
public class PageServlet extends HttpServlet{

   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       doPost(req, resp);
   }

   @Override
   protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       //设置编码方式
       req.setCharacterEncoding("utf-8");
       resp.setContentType("text/html; charset=UTF-8");

       //获取out
       PrintWriter out=resp.getWriter();

       int pageIndex=1;
       int pageSize=5;

       //接收pid
       String pid=req.getParameter("pid");
       if(pid!=null) {
           pageIndex=Integer.parseInt(pid);
       }

       //调用biz层的分页方法
       IGoodsBiz igb=new GoodsBiz();
       //商品集合
       List<Goods> ls=igb.getAllByPage(pageIndex, pageSize);
       //获取最大页码
       int max=igb.getMax("goods", pageSize);
       //把集合转为String
       String str=JSON.toJSONString(ls);
       //把响应输送到客户端
       out.print(str+"*"+max);//特殊字符做拼接
       out.flush();
       out.close();
   }
}

页面效果图:

এ 清ོ眸ꦿ℘゜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb(ajax实现分页)

简介:一：Ajax是什么?ajax是只刷新局部页面的技术,全名是 Asynchr onous(异步的) JavaScript And XmlJavaScript：更新局部的网页XML：一般用于请求数据和响应数据的封装XMLHttpRequest对象：发送请求到服务器并获得返回结果 ***Ajax技术的核心CSS：美化页面样式异步：发送请求后不等返回结果，由回调函数处理结果二: Ajax的好处?无刷新：不刷新整个页面，只刷新局部无刷新的好处只更新部...
复制链接

扫一扫