哈喽，大家好，今天给大家带来这个省市联动，分页（无刷新），让我们来看看
一，省市联动
省市联动的关键在于表id和省id，在同一个表中省id就显的尤其重要，下面给一部分的省市数据，要后续的小伙伴可以私信博主
create sequence seq_region;
create sequence seq_goods;
--省表
create table bs_region
(
id number NOT NULL PRIMARY KEY,
name varchar(32) NOT NULL,
rid int NOT NULL
);
--省
insert into bs_region
values (seq_region.nextval, '北京市', 0);
insert into bs_region
values (seq_region.nextval, '天津市', 0);
insert into bs_region
values (seq_region.nextval, '上海市', 0);
insert into bs_region
values (seq_region.nextval, '重庆市', 0);
insert into bs_region
values (seq_region.nextval, '河北省', 0);
insert into bs_region
values (seq_region.nextval, '山西省', 0);
insert into bs_region
values (seq_region.nextval, '台湾省', 0);
insert into bs_region
values (seq_region.nextval, '辽宁省', 0);
insert into bs_region
values (seq_region.nextval, '吉林省', 0);
insert into bs_region
values (seq_region.nextval, '黑龙江省', 0);
insert into bs_region
values (seq_region.nextval, '江苏省', 0);
insert into bs_region
values (seq_region.nextval, '浙江省', 0);
insert into bs_region
values (seq_region.nextval, '安徽省', 0);
insert into bs_region
values (seq_region.nextval, '福建省', 0);
insert into bs_region
values (seq_region.nextval, '江西省', 0);
insert into bs_region
values (seq_region.nextval, '山东省', 0);
insert into bs_region
values (seq_region.nextval, '河南省', 0);
insert into bs_region
values (seq_region.nextval, '湖北省', 0);
insert into bs_region
values (seq_region.nextval, '湖南省', 0);
insert into bs_region
values (seq_region.nextval, '广东省', 0);
insert into bs_region
values (seq_region.nextval, '甘肃省', 0);
insert into bs_region
values (seq_region.nextval, '四川省', 0);
insert into bs_region
values (seq_region.nextval, '贵州省', 0);
insert into bs_region
values (seq_region.nextval, '海南省', 0);
insert into bs_region
values (seq_region.nextval, '云南省', 0);
insert into bs_region
values (seq_region.nextval, '青海省', 0);
insert into bs_region
values (seq_region.nextval, '陕西省', 0);
insert into bs_region
values (seq_region.nextval, '广西壮族自治区', 0);
insert into bs_region
values (seq_region.nextval, '西藏自治区', 0);
insert into bs_region
values (seq_region.nextval, '宁夏回族自治区', 0);
insert into bs_region
values (seq_region.nextval, '新疆维吾尔自治区', 0);
insert into bs_region
values (seq_region.nextval, '内蒙古自治区', 0);
insert into bs_region
values (seq_region.nextval, '澳门特别行政区', 0);
insert into bs_region
values (seq_region.nextval, '香港特别行政区', 0);
--插入各个省的城市数据
--4个直辖市 ;
insert into bs_region
values (seq_region.nextval, '北京市', 1);
insert into bs_region
values (seq_region.nextval, '天津市', 2);
insert into bs_region
values (seq_region.nextval, '上海市', 3);
insert into bs_region
values (seq_region.nextval, '重庆市', 4);
--5河北省(2005年辖：11个地级市，36个市辖区、22个县级市、108个县、6个自治县) ;
insert into bs_region
values (seq_region.nextval, '石家庄市', 5);
insert into bs_region
values (seq_region.nextval, '唐山市', 5);
insert into bs_region
values (seq_region.nextval, '秦皇岛市', 5);
insert into bs_region
values (seq_region.nextval, '邯郸市', 5);
insert into bs_region
values (seq_region.nextval, '邢台市', 5);
insert into bs_region
values (seq_region.nextval, '保定市', 5);
insert into bs_region
values (seq_region.nextval, '张家口市', 5);
insert into bs_region
values (seq_region.nextval, '承德市', 5);
insert into bs_region
values (seq_region.nextval, '沧州市', 5);
insert into bs_region
values (seq_region.nextval, '廊坊市', 5);
insert into bs_region
values (seq_region.nextval, '衡水市', 5);
--6山西省11个城市 ;
insert into bs_region
values (seq_region.nextval, '太原市', 6);
insert into bs_region
values (seq_region.nextval, '大同市', 6);
insert into bs_region
values (seq_region.nextval, '阳泉市', 6);
insert into bs_region
values (seq_region.nextval, '长治市', 6);
insert into bs_region
values (seq_region.nextval, '晋城市', 6);
insert into bs_region
values (seq_region.nextval, '朔州市', 6);
insert into bs_region
values (seq_region.nextval, '晋中市', 6);
insert into bs_region
values (seq_region.nextval, '运城市', 6);
insert into bs_region
values (seq_region.nextval, '忻州市', 6);
insert into bs_region
values (seq_region.nextval, '临汾市', 6);
insert into bs_region
values (seq_region.nextval, '吕梁市', 6);
insert into bs_region
values (seq_region.nextval, '台北市', 7);
insert into bs_region
values (seq_region.nextval, '高雄市', 7);
insert into bs_region
values (seq_region.nextval, '基隆市', 7);
insert into bs_region
values (seq_region.nextval, '台中市', 7);
insert into bs_region
values (seq_region.nextval, '台南市', 7);
insert into bs_region
values (seq_region.nextval, '新竹市', 7);
insert into bs_region
values (seq_region.nextval, '嘉义市', 7);
insert into bs_region
values (seq_region.nextval, '台北县', 7);
insert into bs_region
values (seq_region.nextval, '宜兰县', 7);
insert into bs_region
values (seq_region.nextval, '桃园县', 7);
insert into bs_region
values (seq_region.nextval, '新竹县', 7);
insert into bs_region
values (seq_region.nextval, '苗栗县', 7);
insert into bs_region
values (seq_region.nextval, '台中县', 7);
insert into bs_region
values (seq_region.nextval, '彰化县', 7);
insert into bs_region
values (seq_region.nextval, '南投县', 7);
insert into bs_region
values (seq_region.nextval, '云林县', 7);
insert into bs_region
values (seq_region.nextval, '嘉义县', 7);
insert into bs_region
values (seq_region.nextval, '台南县', 7);
insert into bs_region
values (seq_region.nextval, '高雄县', 7);
insert into bs_region
values (seq_region.nextval, '屏东县', 7);
insert into bs_region
values (seq_region.nextval, '澎湖县', 7);
insert into bs_region
values (seq_region.nextval, '台东县', 7);
insert into bs_region
values (seq_region.nextval, '花莲县', 7);
把数据准备好了就可以准备写后台代码了，在写之前记得导入相应的驱动和jar包
在这里提供一些关键代码
1，regiondaoimpl
package com.zking.Dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.zking.Dao.IReginoDao;
import com.zking.pojo.Region;
import com.zking.uitl.DBHepler;
public class ReginoDaoImpl implements IReginoDao {
private Connection con;
private PreparedStatement ps;
private ResultSet rs;
@Override
public List<Region> lsit(int rid) {
List<Region> list = new ArrayList<Region>();
try {
con = DBHepler.getCon();
ps = con.prepareStatement("select * from BS_REGION where rid=?");
ps.setInt(1, rid);
rs = ps.executeQuery();
while (rs.next()) {
Region region = new Region();
region.setId(rs.getInt(1));
region.setName(rs.getString(2));
region.setRid(rs.getInt(3));
list.add(region);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
DBHepler.close(con, ps, rs);
}
return list;
}
}
- reginoservlet
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.fasterxml.jackson.databind.ObjectMapper;
import com.zking.biz.IReginoBiz;
import com.zking.biz.impl.ReginoBizImpl;
import com.zking.pojo.Region;
@WebServlet("/regino.do")
public class Reginoservlet extends HttpServlet {
private IReginoBiz reginobiz = new ReginoBizImpl();
private ObjectMapper mapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 先那到id
Integer rid = Integer.parseInt(req.getParameter("rid"));
// 根据rid查对应的省
resp.setCharacterEncoding("utf-8");
List<Region> list = reginobiz.list(rid);
//
PrintWriter out = resp.getWriter();
// 转成jsno对象字符串
String json = mapper.writeValueAsString(list);
out.println(json);
}
}
- 页面显示 region
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<select id="province" onchange="changeCity()"></select>
<select id="city"></select>
<script type="text/javascript">
let province=$("#province");
let city=$("#city");
function changeCity(){
$.get('regino.do',{rid:province.val()},(resp)=>{
//清空原有内容
city.empty();
for(let r of resp){
//console.log(resp)
city.append("<option value="+r.id+">"+r.name+" </option>")
}
},"json")
}
$(()=>{
//显示省份
$.get('regino.do',{rid:0},(resp)=>{
//清空原有内容
province.empty();
for(let r of resp){
province.append("<option value="+r.id+">"+r.name+" </option>")
}
changeCity();
},"json")
})
</script>
</body>
</html>
完成这些还需要Dao ,Biz Uitl,pojo 的编写，都是一些简单代码，如果有需要的小伙伴就可以来私信我！
二，无刷新分页
主要技术点在于要首先查询出数据的总量，然后再根据分页要求显示内容，在来划分查询，最后完成分页显示！
这里我也给关键代码
1 . goodsdaoimpl
package com.zking.Dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.zking.Dao.IGoodsdao;
import com.zking.pojo.Goods;
import com.zking.uitl.DBHepler;
public class Goodsdaoimpl implements IGoodsdao {
// 定义资源
private Connection con;
private PreparedStatement ps;
private ResultSet rs;
@Override
public List<Goods> list(int page, int size) {
List<Goods> list = new ArrayList<>();
int begin = (page - 1) * size + 1;
int end = page * size;
try {
con = DBHepler.getCon();
ps = con.prepareStatement("select * from (select a.*,ROWNUM rid from BS_GOODS a) temp where rid between ? and ?");
// select *from (select a.*,fownum rid from bs_goods a )temp where rid between ?
// and ? ;
ps.setInt(1, begin);
ps.setInt(2, end);
rs = ps.executeQuery();
while (rs.next()) {
Goods goods = new Goods();
goods.setId(rs.getInt(1));
goods.setName(rs.getString(2));
goods.setDescribe(rs.getString(3));
goods.setPrice(rs.getInt(4));
goods.setStock(rs.getInt(5));
goods.setCover(rs.getString(6));
list.add(goods);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
DBHepler.close(con, ps, rs);
}
return list;
}
//查询最大数据条数
@Override
public int total() {
try {
con=DBHepler.getCon();
ps=con.prepareStatement("select count(1) from bs_goods");
rs= ps.executeQuery();
if(rs.next()){
return rs.getInt(1);
}
}catch (Exception e){
e.printStackTrace();
}finally {
DBHepler.close(con,ps,rs);
}
return 0;
}
}
2 . goodsservlet
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.fasterxml.jackson.databind.ObjectMapper;
import com.zking.biz.IgoodsBiz;
import com.zking.biz.impl.GoodsBizImple;
import com.zking.pojo.Goods;
import com.zking.pojo.GoodsVo;
@WebServlet("/goods.do")
public class GoodsServlet extends HttpServlet {
private IgoodsBiz goodsBiz = new GoodsBizImple();
private ObjectMapper mapper = new ObjectMapper();
@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 {
// 先拿到请求的页数和行数
int size = 3;
int page = 1;
String obj = req.getParameter("page");
if (obj != null) {
page = Integer.parseInt(obj);
}
// 拿到数据库的数据
List<Goods> list = goodsBiz.list(page, size);
// 拿到数据库最大条条数
int total = goodsBiz.total();
// 封装到一个goodsvo 对象在丢出去
GoodsVo gv = new GoodsVo(list, total);
// 通过响应丢出数据
resp.setCharacterEncoding("utf-8");
PrintWriter out = resp.getWriter();
out.println(mapper.writeValueAsString(gv));
}
}
3 .GoodsVo
package com.zking.pojo;
import java.util.List;
public class GoodsVo {
private List<Goods> list;
private Integer total;
public List<Goods> getList() {
return list;
}
public void setList(List<Goods> list) {
this.list = list;
}
public Integer getTotal() {
return total;
}
public void setTotal(Integer total) {
this.total = total;
}
@Override
public String toString() {
return "GoodsVo [list=" + list + ", total=" + total + "]";
}
public GoodsVo(List<Goods> list, Integer total) {
super();
this.list = list;
this.total = total;
}
public GoodsVo() {
// TODO Auto-generated constructor stub
}
}
4 . index
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-3.3.1.js"></script>
<!-- Bootstrap CSS -->
<link href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css"
rel="stylesheet">
<!-- Bootstrap JS -->
<script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
<style>
.container {
padding-top: 30px;
}
</style>
</head>
<body calss="container">
<table class="table table-dark table-striped">
<tr>
<th>商品编号</th>
<th>商品名字</th>
<th>商品描述</th>
<th>商品价格</th>
<th>商品库存</th>
<th>商品封面</th>
<th>商品操作</th>
</tr>
</table>
<nav>
<ul id="pagination" class="pagination pagination-lg">
</ul>
</nav>
<script>
let page=1;//初始第一页
let total=1;//初始化最大有一页
function changePage(p){
page=p;
$.ajax({
url: "goods.do",
data: {page},
type: "post",
dataType: "json",
success(resp) {
let table = $("table")
//清除表格数据
table.find("tr").has("td").empty()
//生成表格数据
for (let g of resp.list) {
table.append(`<tr>
<td>`+g.id+`</td>
<td>`+g.name+`</td>
<td>`+g.describe+`</td>
<td>`+g.price+`</td>
<td>`+g.stock+`</td>
<td>`+g.cover+`</td>
<td></td>
</tr>
`)
}
//生成分页条 【只有总条数发生改变】
if(total!==resp.total){
total=resp.total;
let pagination=$("#pagination")
pagination.empty();
for (let i = 1; i <= total; i++) {
pagination.append(
'<li class="page-item"><button onclick="changePage('+i+')" class="page-link">'+i+'</button></li>'
)
}
}
//选中对应的分页
let item=$(".page-item").eq(page-1)
//自己添加
item.addClass("active")
//兄弟移除
item.siblings().removeClass("active")
}
})
}
//页面加载函数
$(() => {
changePage(1);
})
</script>
</body>
</html>
图目
最后在给大家一个需要导入的内容图目：
ok,以上就是博主给大家分享的内容了，关注博主，关注精彩！
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
