利用Ajax实现无刷新分页

Bugxiu_fu

于 2022-05-13 18:08:32 发布

阅读量367

点赞数

文章标签： ajax json javascript

本文链接：https://blog.csdn.net/Bugxiu_fu/article/details/124757271

版权

JSON:对象字符串（满足对象的定义规则）

var obj = {"name":"value","name":"value"};

JSON的使用

前端：

原生态js：JSON.parse(json) stringify() jQuery:parseJSON

后端

fastJSON

对象《----》JSON字符串 JSON.toJSONString(obj);

JSON.parseObject(str,对象.class);

jackJSON

ObjectMapper mapper = new ObjectMapper();

mapper.writeValueAsString(obj); mapper.readValue(str,对象.class);

AJAX的使用

let path = "${pageContext.request.servletContext.contextPath}";

无刷新页面语法规则：
$.ajax({ url:path+"/hell.do", type:"post",

data:{"username":"admin","password":"123"},

datatype:"json",

success:function(data){ //data 相关处理 } });

$.post(path+"/hello.do",{"username":"admin","password":"123"},function(data){

});

代码展示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无刷新分页</title>
<!-- 导入jQuery类库 -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    //获取项目路径
    let path = "${pageContext.request.servletContext.contextPath}";
    
    let pageIndex = 1;//控制前端的下一页或者上一页 点击之后 的页码
    let pageMax = 0;//最大页码  扩大作用域
    let searchName="";
    
    $(function() {
        myload();
    });
    
     function myload(searchName){
         $.post(path+"/amdinGoodsList.do",{"pageIndex":pageIndex,"searchName":searchName},function(data){
                //console.log(data);
                //$("#content").html(data);
                //先转义成array
                let list = $.parseJSON(data);
                //最大页面
                pageMax = list.pageMax;
                //console.log($.type(list));
                //遍历
                let str = "<table border = '1' width = '100%'>";
                str+="<tr>";
                str+="<th>编号</th>";
                str+="<th>名称</th>";
                str+="<th>类型</th>";
                str+="<th>图片</th>";
                str+="<th>价格</th>";
                str+="<th>库存</th>";
                str+="<th>描述</th>";
                str+="<th>操作</th>";
                str+="</tr>";
                
                $.each(list.adminListGoods,function(index,object){
                    //console.log(index,object.gname);
                    str+="<tr>";
                    str+="<td>"+object.gid+"</td>";
                    str+="<td>"+object.gname+"</td>";
                    str+="<td>"+object.gtype+"</td>";
                    str+="<td><img src = '"+object.gimage+"' width = '80' height = '60' /></td>";
                    str+="<td>"+object.gprice+"</td>";
                    str+="<td>"+object.gkc+"</td>";
                    str+="<td>"+object.ginfo+"</td>";
                    str+="<td><button>删除</button><button>修改</button></td>";
                    str+="</tr>";
                });
                str+="</table>";
                
                //统一将str追加到content中
                $("#content").html(str);
                $("#pIndex").html(pageIndex);
                $("#pMax").html(pageMax);
            });
    }
    function nextPage(a) {
        
    //实现下一页方法
        if(a==2){
            if(pageIndex>=pageMax){
                pageIndex=pageMax;
                return;
            }else{
            pageIndex++;
            }
        }
    //实现上一页方法
        if(a==1){
            if(pageIndex<1){
                pageIndex--;
            }else{
                pageIndex=1;
            }
            
        }
        
    //实现首页方法
        if(a==3){
            pageIndex=1;
            
        }
        
    //实现尾页方法
        if(a==4){
            pageIndex=pageMax;
            
        }
    //重新调用刷新方法
        myload();
    }
    
</script>
</head>
<body>
    <div id="content">
    
    </div>
    
    <div id="pageCount">
    <span id="pIndex"></span>/<span id="pMax"></span>
    <a href="javascript:nextPage(3);">首页</a>
    <a href="javascript:nextPage(1);">上一页</a>
    <a href = "javascript:nextPage(2);">下一页</a>
    <a href="javascript:nextPage(4);">尾页</a>

    </div>
    
</body>
</html>

跳转的servlet界面：

package com.zking.cart.ht.servlet;

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

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.fasterxml.jackson.databind.ObjectMapper;
import com.zking.cart.biz.IGoodsBiz;
import com.zking.cart.biz.impl.GoodsBizImpl;
import com.zking.cart.entity.Goods;
import com.zking.cart.utils.GetUtils;

//后台显示数据的servlet
@WebServlet("/amdinGoodsList.do")
public class adminGoodsListServlet extends HttpServlet {
    
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#doGet(HttpServletRequest request,
     * 
     *      HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request,

            HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doPost(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request,
     * 
     *      HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
        // 1.设置请求和响应编码
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        Integer pageIndex = 1;
        Integer pageSize = 3;
        // 2.处理请求
        String pIndex = request.getParameter("pageIndex");

        if (null != pIndex) {
            pageIndex = Integer.valueOf(pIndex);
        }

        Integer pageCount = new GetUtils().getTableCount("tb_goods", "gname", "");
        Integer pageMax = pageCount % pageSize != 0 ?pageCount / pageSize + 1 : pageCount / pageSize;

        // 3.处理请求（调用biz通过域对象保存）
        IGoodsBiz biz = new GoodsBizImpl();

        List<Goods> adminListGoods = biz.queryGoodsAll(pageIndex, pageSize, "");

        // map集合保存
        Map<String, Object> maps = new HashMap<String, Object>();
        maps.put("adminListGoods", adminListGoods);
        maps.put("pageMax", pageMax);

        ObjectMapper mapper = new ObjectMapper();
        String writeValueAsString =mapper.writeValueAsString(maps);

        PrintWriter out = response.getWriter();
        out.write(writeValueAsString);
        out.flush();
        out.close();
    }

}