current position：Home>Using Ajax to realize non refresh paging

Using Ajax to realize non refresh paging

2022-05-15 02:40:45【Bugxiu_ fu】

JSON: Object string （ Meet the definition rules of objects ）

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

JSON Use

front end ：

Original ecology js：JSON.parse(json) stringify() jQuery:parseJSON

Back end

fastJSON

object 《----》JSON character string JSON.toJSONString(obj);

JSON.parseObject(str, object .class);

jackJSON

ObjectMapper mapper = new ObjectMapper();

mapper.writeValueAsString(obj); mapper.readValue(str, object .class);

AJAX Use

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

No refresh page syntax rules ：

$.ajax({ url:path+"/hell.do", type:"post",

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

datatype:"json",

success:function(data){ //data  Related treatment  } });

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

});

Code display ：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> No refresh paging </title>
<!--  Import jQuery Class library  -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    // Get project path 
    let path = "${pageContext.request.servletContext.contextPath}";
    
    let pageIndex = 1;// Control the next or previous page of the front end   After clicking   Page number of 
    let pageMax = 0;// Maximum page number    Expand scope 
    let searchName="";
    
    $(function() {
        myload();
    });
    
     function myload(searchName){
         $.post(path+"/amdinGoodsList.do",{"pageIndex":pageIndex,"searchName":searchName},function(data){
                //console.log(data);
                //$("#content").html(data);
                // First escape to array
                let list = $.parseJSON(data);
                // Maximum pages 
                pageMax = list.pageMax;
                //console.log($.type(list));
                // Traverse 
                let str = "<table border = '1' width = '100%'>";
                str+="<tr>";
                str+="<th> Number </th>";
                str+="<th> name </th>";
                str+="<th> type </th>";
                str+="<th> picture </th>";
                str+="<th> Price </th>";
                str+="<th> stock </th>";
                str+="<th> describe </th>";
                str+="<th> operation </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> Delete </button><button> modify </button></td>";
                    str+="</tr>";
                });
                str+="</table>";
                
                // United will str Append to content in 
                $("#content").html(str);
                $("#pIndex").html(pageIndex);
                $("#pMax").html(pageMax);
            });
    }
    function nextPage(a) {
        
    // Implement the method on the next page 
        if(a==2){
            if(pageIndex>=pageMax){
                pageIndex=pageMax;
                return;
            }else{
            pageIndex++;
            }
        }
    // Implement the method on the previous page 
        if(a==1){
            if(pageIndex<1){
                pageIndex--;
            }else{
                pageIndex=1;
            }
            
        }
        
    // Implementation method of home page 
        if(a==3){
            pageIndex=1;
            
        }
        
    // The method of realizing the last page 
        if(a==4){
            pageIndex=pageMax;
            
        }
    // Call the refresh method again 
        myload();
    }
    
</script>
</head>
<body>
    <div id="content">
    
    </div>
    
    <div id="pageCount">
    <span id="pIndex"></span>/<span id="pMax"></span>
    <a href="javascript:nextPage(3);"> home page </a>
    <a href="javascript:nextPage(1);"> The previous page </a>
    <a href = "javascript:nextPage(2);"> The next page </a>
    <a href="javascript:nextPage(4);"> Tail page </a>
​
    </div>
    
</body>
</html>

The jump servlet Interface ：

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;
​
// Display data in the background 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. Set request and response encoding 
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
​
        Integer pageIndex = 1;
        Integer pageSize = 3;
        // 2. Processing requests 
        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. Processing requests （ call biz Save through domain object ）
        IGoodsBiz biz = new GoodsBizImpl();
​
        List<Goods> adminListGoods = biz.queryGoodsAll(pageIndex, pageSize, "");
​
        // map Set save 
        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();
    }
​
}
​

copyright notice
author[Bugxiu_ fu],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/135/202205142119593817.html

The sidebar is recommended

guess what you like

Random recommended