current position:Home>Ajax realizes no refresh paging (no refresh paging shopping cart source code)

Ajax realizes no refresh paging (no refresh paging shopping cart source code)

2022-04-29 11:08:46Chase dream Zichen

Before we use refresh free paging , Let's find out the difference first :

What is no refresh paging :

That is, paging just refreshes local pages , Other pages don't move

Refresh the page :

Refreshing all pages will reduce user friendliness

For example :

Shopping cart Pagination , If the shopping cart is at the bottom of the page , Click on the next page if no refresh paging is used , Will refresh the whole page , And the page will go to the top . Without refreshing paging , Just refresh some pages , The entire page will not refresh , It won't go to the top of the page , Who is good and who is bad is clear at a glance
Pagination shopping cart source code :
Here I use a three-tier architecture , And because the content of the response is the object , So I imported a json Of jar package , use json To convert ,json Of jar Package address , Students who need help can ask themselves :[ link :https://pan.baidu.com/s/19CnVMMStKxJmmnAEa12DFA Extraction code :2y5v ](https://pan.baidu.com/s/19CnVMMStKxJmmnAEa12DFA)
1. Entity class
package com.zking.entity;

public class Goods {
    
	private Integer id;
	private String  name;
	private String describe;
	private Integer price;
	public Integer getId() {
    
		return id;
	}
	public void setId(Integer id) {
    
		this.id = id;
	}
	public String getName() {
    
		return name;
	}
	public void setName(String name) {
    
		this.name = name;
	}
	public String getDescribe() {
    
		return describe;
	}
	public void setDescribe(String describe) {
    
		this.describe = describe;
	}
	public Integer getPrice() {
    
		return price;
	}
	public void setPrice(Integer price) {
    
		this.price = price;
	}
	
	public Goods() {
    
		// TODO Auto-generated constructor stub
	}
	public Goods( String name, String describe, Integer price) {
    
		
		this.name = name;
		this.describe = describe;
		this.price = price;
	}
	public Goods(Integer id, String name, String describe, Integer price) {
    
		this.id = id;
		this.name = name;
		this.describe = describe;
		this.price = price;
	}
	@Override
	public String toString() {
    
		return "Goods [id=" + id + ", name=" + name + ", describe=" + describe + ", price=" + price + "]";
	}
	
	
	
	
}


2. goods Dao Method
package com.zking.Dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.zking.entity.Goods;
import com.zking.entity.User;
import com.zking.uilt.DBhelper;

public class GoodsDao implements IGoodsDao{
    
	private Connection con;
	private PreparedStatement ps;
	private ResultSet rs;
	@Override
	public List<Goods> list() {
    
		// Check all items 
		List<Goods> list=new ArrayList<Goods>();
		try {
    
			con=DBhelper.getCon();
			ps=con.prepareStatement("select * from car_goods");
			
			rs=ps.executeQuery();
			while(rs.next()) {
    
			
				Goods g=new Goods(rs.getInt(1), rs.getString(2), rs.getString(3), rs.getInt(4));
				list.add(g);
			}
		} catch (Exception e) {
    
			e.printStackTrace();
		}finally {
    
			DBhelper.myClose(con, ps, rs);
		}
		
		return list;
	}
	@Override// Query a product 
	public Goods getOne(int id) {
    
		try {
    
			con=DBhelper.getCon();
			ps=con.prepareStatement("select * from car_goods where id=?");
			ps.setInt(1, id);
			rs=ps.executeQuery();
			if(rs.next()) {
    
				Goods g=new Goods(rs.getInt(1), rs.getString(2), rs.getString(3), rs.getInt(4));
				return g;
			}
		} catch (Exception e) {
    
			e.printStackTrace();
		}finally {
    
			DBhelper.myClose(con, ps, rs);
		}
		
		return null;
	}
	@Override// Get the number of data pieces 
	public int getrows(String name) {
    
		try {
    
			con=DBhelper.getCon();
			ps=con.prepareStatement("select count(*) from car_goods where name like '%"+name+"%' ");
			rs=ps.executeQuery();
			if(rs.next()) {
    
				return rs.getInt(1);
			}
		} catch (Exception e) {
    
			e.printStackTrace();
		}finally {
    
			DBhelper.myClose(con, ps, rs);
		}
		return 0;
	}
	@Override// Fuzzy query paging 
	public List<Goods> findlist(int pagindex, int pagsize,String name) {
    
		int a=(pagindex-1)*pagsize+1;
		int b=pagindex*pagsize;
		List<Goods> list=new ArrayList<Goods>();
		try {
    
			con=DBhelper.getCon();
			ps=con.prepareStatement("select * from (select a.*,rownum nu from car_goods a where name like '%"+name+"%' ) b where b.nu between "+a+" and "+b);
			
			rs=ps.executeQuery();
			while(rs.next()) {
    
			
				Goods g=new Goods(rs.getInt(1), rs.getString(2), rs.getString(3), rs.getInt(4));
				list.add(g);
			}
		} catch (Exception e) {
    
			e.printStackTrace();
		}finally {
    
			DBhelper.myClose(con, ps, rs);
		}
		
		return list;
	}

}


3.jsp Page code
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="bootstrap-3.3.7-dist\js\bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
    
	padding: 20px 40px;
}
</style>
<script src="js/jquery-3.3.1.js"></script>

<script type="text/javascript">
// Default to home page 
	$(function(){
    
		mys('a');
	})
	var pagindex;// The current page number  ,  Scope expansion 
	var max;// Maximum page number 
	
 	function mys(type){
    
 		var name=$("#name").val();// Get the value of the text box 
 		
	if(type=='a'){
    
		pagindex=1;
	}else if(type=='b'){
    
		if(pagindex>1){
    
			pagindex--;
		}else{
    
			alert(" It's already the home page ");
		}
		
	}else if(type=='c'){
    
		if(pagindex<max){
    
			pagindex++;
		}else{
    
			alert(" It's the last page ");
		}
		
	}else{
    
		pagindex=max;
	};
	 $.post("index.do",{
    pagindex:pagindex,name:name},function(mess){
    
		/* str String concatenation  */
		 var str="<table class=\"table table-bordered table-striped\">";
			str+="<tbody><tr>";
			str+="<th> Product id </th>";
			str+="<th> Name of commodity </th>";
			str+="<th> commodity price </th>";
			str+="<th> Commodity operation </th></tr>"
			 max=mess.max;
		 	$.each(mess.list,function(i,g){
    
		 		str+="<tr>";
				str+="<td>"+g.id+"</td>";
				str+="<td>"+g.name+"</td>";
				str+="<td>"+g.price+"</td>";
				str+="<td><a href='addcar.do?id="+g.id+"' class=\"btn btn-default\"> Join in </a></td></tr>";
		 	})
			str+="</tbody></table>"
			// to div assignment 
			$("#mytable").html(str);
			 $("#pag").html(pagindex);
			$("#max").html(max);
			
	 },"json")
 }
</script>
</head>
<body>
	<h1>
		${
    user.accout }, Hello!  <small> This is the home page </small>
	</h1>
	<h1>
		<a class="btn btn-primary" href="car.jsp"> I'll go to the shopping cart </a>
	</h1>
	<div>
	 Trade name :<input type="text" id="name"/>&nbsp;&nbsp;<button onclick="mys('a')"> Inquire about </button>
	</div>
	<div id="mytable"></div>
		
	[<span id="pag"></span>/<span id="max"></span>]
		<button onclick="mys('a')" > home page </button> &nbsp;&nbsp;&nbsp;
		<button onclick="mys('b')" > The previous page </button>&nbsp;&nbsp;&nbsp;
		<button onclick="mys('c')" > The next page </button>&nbsp;&nbsp;&nbsp;
		<button onclick="mys('d')" > Tail page </button>&nbsp;&nbsp;&nbsp;
</body></html>

4.Servlet Code :

package com.zking.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.alibaba.fastjson.JSON;
import com.zking.biz.Goodsbiz;
import com.zking.biz.IGoodsbiz;
import com.zking.entity.Goods;

/** * Servlet implementation class IndexServlet */
@WebServlet("/index.do")
public class IndexServlet extends HttpServlet {
    
	private IGoodsbiz goodsbiz=new Goodsbiz();
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
		doPost(request, response);
	
	}

	/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
		// receive jsp The data parameters transmitted 
		String  pagindex =request.getParameter("pagindex") ;
		String name=request.getParameter("name");
		if(name==null) {
    // If null, Is an empty string , Equivalent to querying all 
			name="";
		}
		int pagind=0;
		if(pagindex==null) {
    
			pagind=1;
		}else {
    
			pagind=Integer.parseInt(pagindex);
		}
		List<Goods> list = goodsbiz.findlist(pagind, 3,name);// Call the fuzzy query paging method 
		int max=goodsbiz.getrows(name);// Number of query data 
		if(max%3!=0) {
    // Get the maximum page number , I'm fixed for 3, Can be set as a variable 
			max=max/3;
			max++;// If the remainder is not 0 be ++
		}else {
    
			max=max/3;
		}
		PrintWriter out = response.getWriter();
		Map<String, Object> map=new HashMap<>();// Use map aggregate 
		map.put("max", max);
		map.put("list", list);
		String mess = JSON.toJSONString(map);// Use json To string 
		out.println(mess);// Respond to the user 
		out.flush();
		out.close();
	}

}

copyright notice
author[Chase dream Zichen],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290948298019.html

Random recommended