Web开发之【Ajax】【Bootsrtap】省市联动与无刷新分页

在Web开发中

使用Ajax可以实现很多无界面刷新功能，带给了用户良好的使用体验，在上一期文章中也给大家分享了Ajax的一些用途，以及什么是Ajax，感兴趣的话可以去看看哦👇

web开发之Ajax_小阿飞_的博客-CSDN博客你知道 Ajax 的用处吗(O_o)??https://blog.csdn.net/yifei_345678/article/details/124489056?spm=1001.2014.3001.5502今天给大家分享一下如何使用 Ajax 完成省市联动功能

案例：使用Ajax完成省市联动功能

实现省市联动功能的代码（三层架构）

Oracle数据库代码(比较多)

create sequence seq_region;
create sequence seq_goods;

select * from bs_region order by id asc;

commit;
--省表
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);

insert into bs_region
values (seq_region.nextval, '沈阳市', 8);
insert into bs_region
values (seq_region.nextval, '大连市', 8);
insert into bs_region
values (seq_region.nextval, '鞍山市', 8);
insert into bs_region
values (seq_region.nextval, '抚顺市', 8);
insert into bs_region
values (seq_region.nextval, '本溪市', 8);
insert into bs_region
values (seq_region.nextval, '丹东市', 8);
insert into bs_region
values (seq_region.nextval, '锦州市', 8);
insert into bs_region
values (seq_region.nextval, '营口市', 8);
insert into bs_region
values (seq_region.nextval, '阜新市', 8);
insert into bs_region
values (seq_region.nextval, '辽阳市', 8);
insert into bs_region
values (seq_region.nextval, '盘锦市', 8);
insert into bs_region
values (seq_region.nextval, '铁岭市', 8);
insert into bs_region
values (seq_region.nextval, '朝阳市', 8);
insert into bs_region
values (seq_region.nextval, '葫芦岛市', 8);

insert into bs_region
values (seq_region.nextval, '长春市', 9);
insert into bs_region
values (seq_region.nextval, '吉林市', 9);
insert into bs_region
values (seq_region.nextval, '四平市', 9);
insert into bs_region
values (seq_region.nextval, '辽源市', 9);
insert into bs_region
values (seq_region.nextval, '通化市', 9);
insert into bs_region
values (seq_region.nextval, '白山市', 9);
insert into bs_region
values (seq_region.nextval, '松原市', 9);
insert into bs_region
values (seq_region.nextval, '白城市', 9);
insert into bs_region
values (seq_region.nextval, '延边朝鲜族自治州', 9);

insert into bs_region
values (seq_region.nextval, '哈尔滨市', 10);
insert into bs_region
values (seq_region.nextval, '齐齐哈尔市', 10);
insert into bs_region
values (seq_region.nextval, '鹤 岗 市', 10);
insert into bs_region
values (seq_region.nextval, '双鸭山市', 10);
insert into bs_region
values (seq_region.nextval, '鸡 西 市', 10);
insert into bs_region
values (seq_region.nextval, '大 庆 市', 10);
insert into bs_region
values (seq_region.nextval, '伊 春 市', 10);
insert into bs_region
values (seq_region.nextval, '牡丹江市', 10);
insert into bs_region
values (seq_region.nextval, '佳木斯市', 10);
insert into bs_region
values (seq_region.nextval, '七台河市', 10);
insert into bs_region
values (seq_region.nextval, '黑 河 市', 10);
insert into bs_region
values (seq_region.nextval, '绥 化 市', 10);
insert into bs_region
values (seq_region.nextval, '大兴安岭地区', 10);

insert into bs_region
values (seq_region.nextval, '南京市', 11);
insert into bs_region
values (seq_region.nextval, '无锡市', 11);
insert into bs_region
values (seq_region.nextval, '徐州市', 11);
insert into bs_region
values (seq_region.nextval, '常州市', 11);
insert into bs_region
values (seq_region.nextval, '苏州市', 11);
insert into bs_region
values (seq_region.nextval, '南通市', 11);
insert into bs_region
values (seq_region.nextval, '连云港市', 11);
insert into bs_region
values (seq_region.nextval, '淮安市', 11);
insert into bs_region
values (seq_region.nextval, '盐城市', 11);
insert into bs_region
values (seq_region.nextval, '扬州市', 11);
insert into bs_region
values (seq_region.nextval, '镇江市', 11);
insert into bs_region
values (seq_region.nextval, '泰州市', 11);
insert into bs_region
values (seq_region.nextval, '宿迁市', 11);

insert into bs_region
values (seq_region.nextval, '杭州市', 12);
insert into bs_region
values (seq_region.nextval, '宁波市', 12);
insert into bs_region
values (seq_region.nextval, '温州市', 12);
insert into bs_region
values (seq_region.nextval, '嘉兴市', 12);
insert into bs_region
values (seq_region.nextval, '湖州市', 12);
insert into bs_region
values (seq_region.nextval, '绍兴市', 12);
insert into bs_region
values (seq_region.nextval, '金华市', 12);
insert into bs_region
values (seq_region.nextval, '衢州市', 12);
insert into bs_region
values (seq_region.nextval, '舟山市', 12);
insert into bs_region
values (seq_region.nextval, '台州市', 12);
insert into bs_region
values (seq_region.nextval, '丽水市', 12);

insert into bs_region
values (seq_region.nextval, '合肥市', 13);
insert into bs_region
values (seq_region.nextval, '芜湖市', 13);
insert into bs_region
values (seq_region.nextval, '蚌埠市', 13);
insert into bs_region
values (seq_region.nextval, '淮南市', 13);
insert into bs_region
values (seq_region.nextval, '马鞍山市', 13);
insert into bs_region
values (seq_region.nextval, '淮北市', 13);
insert into bs_region
values (seq_region.nextval, '铜陵市', 13);
insert into bs_region
values (seq_region.nextval, '安庆市', 13);
insert into bs_region
values (seq_region.nextval, '黄山市', 13);
insert into bs_region
values (seq_region.nextval, '滁州市', 13);
insert into bs_region
values (seq_region.nextval, '阜阳市', 13);
insert into bs_region
values (seq_region.nextval, '宿州市', 13);
insert into bs_region
values (seq_region.nextval, '巢湖市', 13);
insert into bs_region
values (seq_region.nextval, '六安市', 13);
insert into bs_region
values (seq_region.nextval, '亳州市', 13);
insert into bs_region
values (seq_region.nextval, '池州市', 13);
insert into bs_region
values (seq_region.nextval, '宣城市', 13);

insert into bs_region
values (seq_region.nextval, '福州市', 14);
insert into bs_region
values (seq_region.nextval, '厦门市', 14);
insert into bs_region
values (seq_region.nextval, '莆田市', 14);
insert into bs_region
values (seq_region.nextval, '三明市', 14);
insert into bs_region
values (seq_region.nextval, '泉州市', 14);
insert into bs_region
values (seq_region.nextval, '漳州市', 14);
insert into bs_region
values (seq_region.nextval, '南平市', 14);
insert into bs_region
values (seq_region.nextval, '龙岩市', 14);
insert into bs_region
values (seq_region.nextval, '宁德市', 14);

insert into bs_region
values (seq_region.nextval, '南昌市', 15);
insert into bs_region
values (seq_region.nextval, '景德镇市', 15);
insert into bs_region
values (seq_region.nextval, '萍乡市', 15);
insert into bs_region
values (seq_region.nextval, '九江市', 15);
insert into bs_region
values (seq_region.nextval, '新余市', 15);
insert into bs_region
values (seq_region.nextval, '鹰潭市', 15);
insert into bs_region
values (seq_region.nextval, '赣州市', 15);
insert into bs_region
values (seq_region.nextval, '吉安市', 15);
insert into bs_region
values (seq_region.nextval, '宜春市', 15);
insert into bs_region
values (seq_region.nextval, '抚州市', 15);
insert into bs_region
values (seq_region.nextval, '上饶市', 15);

insert into bs_region
values (seq_region.nextval, '济南市', 16);
insert into bs_region
values (seq_region.nextval, '青岛市', 16);
insert into bs_region
values (seq_region.nextval, '淄博市', 16);
insert into bs_region
values (seq_region.nextval, '枣庄市', 16);
insert into bs_region
values (seq_region.nextval, '东营市', 16);
insert into bs_region
values (seq_region.nextval, '烟台市', 16);
insert into bs_region
values (seq_region.nextval, '潍坊市', 16);
insert into bs_region
values (seq_region.nextval, '济宁市', 16);
insert into bs_region
values (seq_region.nextval, '泰安市', 16);
insert into bs_region
values (seq_region.nextval, '威海市', 16);
insert into bs_region
values (seq_region.nextval, '日照市', 16);
insert into bs_region
values (seq_region.nextval, '莱芜市', 16);
insert into bs_region
values (seq_region.nextval, '临沂市', 16);
insert into bs_region
values (seq_region.nextval, '德州市', 16);
insert into bs_region
values (seq_region.nextval, '聊城市', 16);
insert into bs_region
values (seq_region.nextval, '滨州市', 16);
insert into bs_region
values (seq_region.nextval, '菏泽市', 16);

insert into bs_region
values (seq_region.nextval, '郑州市', 17);
insert into bs_region
values (seq_region.nextval, '开封市', 17);
insert into bs_region
values (seq_region.nextval, '洛阳市', 17);
insert into bs_region
values (seq_region.nextval, '平顶山市', 17);
insert into bs_region
values (seq_region.nextval, '安阳市', 17);
insert into bs_region
values (seq_region.nextval, '鹤壁市', 17);
insert into bs_region
values (seq_region.nextval, '新乡市', 17);
insert into bs_region
values (seq_region.nextval, '焦作市', 17);
insert into bs_region
values (seq_region.nextval, '濮阳市', 17);
insert into bs_region
values (seq_region.nextval, '许昌市', 17);
insert into bs_region
values (seq_region.nextval, '漯河市', 17);
insert into bs_region
values (seq_region.nextval, '三门峡市', 17);
insert into bs_region
values (seq_region.nextval, '南阳市', 17);
insert into bs_region
values (seq_region.nextval, '商丘市', 17);
insert into bs_region
values (seq_region.nextval, '信阳市', 17);
insert into bs_region
values (seq_region.nextval, '周口市', 17);
insert into bs_region
values (seq_region.nextval, '驻马店市', 17);
insert into bs_region
values (seq_region.nextval, '济源市', 17);

insert into bs_region
values (seq_region.nextval, '武汉市', 18);
insert into bs_region
values (seq_region.nextval, '黄石市', 18);
insert into bs_region
values (seq_region.nextval, '十堰市', 18);
insert into bs_region
values (seq_region.nextval, '荆州市', 18);
insert into bs_region
values (seq_region.nextval, '宜昌市', 18);
insert into bs_region
values (seq_region.nextval, '襄樊市', 18);
insert into bs_region
values (seq_region.nextval, '鄂州市', 18);
insert into bs_region
values (seq_region.nextval, '荆门市', 18);
insert into bs_region
values (seq_region.nextval, '孝感市', 18);
insert into bs_region
values (seq_region.nextval, '黄冈市', 18);
insert into bs_region
values (seq_region.nextval, '咸宁市', 18);
insert into bs_region
values (seq_region.nextval, '随州市', 18);
insert into bs_region
values (seq_region.nextval, '仙桃市', 18);
insert into bs_region
values (seq_region.nextval, '天门市', 18);
insert into bs_region
values (seq_region.nextval, '潜江市', 18);
insert into bs_region
values (seq_region.nextval, '神农架林区', 18);
insert into bs_region
values (seq_region.nextval, '恩施土家族苗族自治州', 18);

insert into bs_region
values (seq_region.nextval, '长沙市', 19);
insert into bs_region
values (seq_region.nextval, '株洲市', 19);
insert into bs_region
values (seq_region.nextval, '湘潭市', 19);
insert into bs_region
values (seq_region.nextval, '衡阳市', 19);
insert into bs_region
values (seq_region.nextval, '邵阳市', 19);
insert into bs_region
values (seq_region.nextval, '岳阳市', 19);
insert into bs_region
values (seq_region.nextval, '常德市', 19);
insert into bs_region
values (seq_region.nextval, '张家界市', 19);
insert into bs_region
values (seq_region.nextval, '益阳市', 19);
insert into bs_region
values (seq_region.nextval, '郴州市', 19);
insert into bs_region
values (seq_region.nextval, '永州市', 19);
insert into bs_region
values (seq_region.nextval, '怀化市', 19);
insert into bs_region
values (seq_region.nextval, '娄底市', 19);
insert into bs_region
values (seq_region.nextval, '湘西土家族苗族自治州', 19);

insert into bs_region
values (seq_region.nextval, '广州市', 20);
insert into bs_region
values (seq_region.nextval, '深圳市', 20);
insert into bs_region
values (seq_region.nextval, '珠海市', 20);
insert into bs_region
values (seq_region.nextval, '汕头市', 20);
insert into bs_region
values (seq_region.nextval, '韶关市', 20);
insert into bs_region
values (seq_region.nextval, '佛山市', 20);
insert into bs_region
values (seq_region.nextval, '江门市', 20);
insert into bs_region
values (seq_region.nextval, '湛江市', 20);
insert into bs_region
values (seq_region.nextval, '茂名市', 20);
insert into bs_region
values (seq_region.nextval, '肇庆市', 20);
insert into bs_region
values (seq_region.nextval, '惠州市', 20);
insert into bs_region
values (seq_region.nextval, '梅州市', 20);
insert into bs_region
values (seq_region.nextval, '汕尾市', 20);
insert into bs_region
values (seq_region.nextval, '河源市', 20);
insert into bs_region
values (seq_region.nextval, '阳江市', 20);
insert into bs_region
values (seq_region.nextval, '清远市', 20);
insert into bs_region
values (seq_region.nextval, '东莞市', 20);
insert into bs_region
values (seq_region.nextval, '中山市', 20);
insert into bs_region
values (seq_region.nextval, '潮州市', 20);
insert into bs_region
values (seq_region.nextval, '揭阳市', 20);
insert into bs_region
values (seq_region.nextval, '云浮市', 20);

insert into bs_region
values (seq_region.nextval, '兰州市', 21);
insert into bs_region
values (seq_region.nextval, '金昌市', 21);
insert into bs_region
values (seq_region.nextval, '白银市', 21);
insert into bs_region
values (seq_region.nextval, '天水市', 21);
insert into bs_region
values (seq_region.nextval, '嘉峪关市', 21);
insert into bs_region
values (seq_region.nextval, '武威市', 21);
insert into bs_region
values (seq_region.nextval, '张掖市', 21);
insert into bs_region
values (seq_region.nextval, '平凉市', 21);
insert into bs_region
values (seq_region.nextval, '酒泉市', 21);
insert into bs_region
values (seq_region.nextval, '庆阳市', 21);
insert into bs_region
values (seq_region.nextval, '定西市', 21);
insert into bs_region
values (seq_region.nextval, '陇南市', 21);
insert into bs_region
values (seq_region.nextval, '临夏回族自治州', 21);
insert into bs_region
values (seq_region.nextval, '甘南藏族自治州', 21);

insert into bs_region
values (seq_region.nextval, '成都市', 22);
insert into bs_region
values (seq_region.nextval, '自贡市', 22);
insert into bs_region
values (seq_region.nextval, '攀枝花市', 22);
insert into bs_region
values (seq_region.nextval, '泸州市', 22);
insert into bs_region
values (seq_region.nextval, '德阳市', 22);
insert into bs_region
values (seq_region.nextval, '绵阳市', 22);
insert into bs_region
values (seq_region.nextval, '广元市', 22);
insert into bs_region
values (seq_region.nextval, '遂宁市', 22);
insert into bs_region
values (seq_region.nextval, '内江市', 22);
insert into bs_region
values (seq_region.nextval, '乐山市', 22);
insert into bs_region
values (seq_region.nextval, '南充市', 22);
insert into bs_region
values (seq_region.nextval, '眉山市', 22);
insert into bs_region
values (seq_region.nextval, '宜宾市', 22);
insert into bs_region
values (seq_region.nextval, '广安市', 22);
insert into bs_region
values (seq_region.nextval, '达州市', 22);
insert into bs_region
values (seq_region.nextval, '雅安市', 22);
insert into bs_region
values (seq_region.nextval, '巴中市', 22);
insert into bs_region
values (seq_region.nextval, '资阳市', 22);
insert into bs_region
values (seq_region.nextval, '阿坝藏族羌族自治州', 22);
insert into bs_region
values (seq_region.nextval, '甘孜藏族自治州', 22);
insert into bs_region
values (seq_region.nextval, '凉山彝族自治州', 22);

insert into bs_region
values (seq_region.nextval, '贵阳市', 23);
insert into bs_region
values (seq_region.nextval, '六盘水市', 23);
insert into bs_region
values (seq_region.nextval, '遵义市', 23);
insert into bs_region
values (seq_region.nextval, '安顺市', 23);
insert into bs_region
values (seq_region.nextval, '铜仁地区', 23);
insert into bs_region
values (seq_region.nextval, '毕节地区', 23);
insert into bs_region
values (seq_region.nextval, '黔西南布依族苗族自治州', 23);
insert into bs_region
values (seq_region.nextval, '黔东南苗族侗族自治州', 23);
insert into bs_region
values (seq_region.nextval, '黔南布依族苗族自治州', 23);

insert into bs_region
values (seq_region.nextval, '海口市', 24);
insert into bs_region
values (seq_region.nextval, '三亚市', 24);
insert into bs_region
values (seq_region.nextval, '五指山市', 24);
insert into bs_region
values (seq_region.nextval, '琼海市', 24);
insert into bs_region
values (seq_region.nextval, '儋州市', 24);
insert into bs_region
values (seq_region.nextval, '文昌市', 24);
insert into bs_region
values (seq_region.nextval, '万宁市', 24);
insert into bs_region
values (seq_region.nextval, '东方市', 24);
insert into bs_region
values (seq_region.nextval, '澄迈县', 24);
insert into bs_region
values (seq_region.nextval, '定安县', 24);
insert into bs_region
values (seq_region.nextval, '屯昌县', 24);
insert into bs_region
values (seq_region.nextval, '临高县', 24);
insert into bs_region
values (seq_region.nextval, '白沙黎族自治县', 24);
insert into bs_region
values (seq_region.nextval, '昌江黎族自治县', 24);
insert into bs_region
values (seq_region.nextval, '乐东黎族自治县', 24);
insert into bs_region
values (seq_region.nextval, '陵水黎族自治县', 24);
insert into bs_region
values (seq_region.nextval, '保亭黎族苗族自治县', 24);
insert into bs_region
values (seq_region.nextval, '琼中黎族苗族自治县', 24);

insert into bs_region
values (seq_region.nextval, '昆明市', 25);
insert into bs_region
values (seq_region.nextval, '曲靖市', 25);
insert into bs_region
values (seq_region.nextval, '玉溪市', 25);
insert into bs_region
values (seq_region.nextval, '保山市', 25);
insert into bs_region
values (seq_region.nextval, '昭通市', 25);
insert into bs_region
values (seq_region.nextval, '丽江市', 25);
insert into bs_region
values (seq_region.nextval, '思茅市', 25);
insert into bs_region
values (seq_region.nextval, '临沧市', 25);
insert into bs_region
values (seq_region.nextval, '文山壮族苗族自治州', 25);
insert into bs_region
values (seq_region.nextval, '红河哈尼族彝族自治州', 25);
insert into bs_region
values (seq_region.nextval, '西双版纳傣族自治州', 25);
insert into bs_region
values (seq_region.nextval, '楚雄彝族自治州', 25);
insert into bs_region
values (seq_region.nextval, '大理白族自治州', 25);
insert into bs_region
values (seq_region.nextval, '德宏傣族景颇族自治州', 25);
insert into bs_region
values (seq_region.nextval, '怒江傈傈族自治州', 25);
insert into bs_region
values (seq_region.nextval, '迪庆藏族自治州', 25);

insert into bs_region
values (seq_region.nextval, '西宁市', 26);
insert into bs_region
values (seq_region.nextval, '海东地区', 26);
insert into bs_region
values (seq_region.nextval, '海北藏族自治州', 26);
insert into bs_region
values (seq_region.nextval, '黄南藏族自治州', 26);
insert into bs_region
values (seq_region.nextval, '海南藏族自治州', 26);
insert into bs_region
values (seq_region.nextval, '果洛藏族自治州', 26);
insert into bs_region
values (seq_region.nextval, '玉树藏族自治州', 26);
insert into bs_region
values (seq_region.nextval, '海西蒙古族藏族自治州', 26);

insert into bs_region
values (seq_region.nextval, '西安市', 27);
insert into bs_region
values (seq_region.nextval, '铜川市', 27);
insert into bs_region
values (seq_region.nextval, '宝鸡市', 27);
insert into bs_region
values (seq_region.nextval, '咸阳市', 27);
insert into bs_region
values (seq_region.nextval, '渭南市', 27);
insert into bs_region
values (seq_region.nextval, '延安市', 27);
insert into bs_region
values (seq_region.nextval, '汉中市', 27);
insert into bs_region
values (seq_region.nextval, '榆林市', 27);
insert into bs_region
values (seq_region.nextval, '安康市', 27);
insert into bs_region
values (seq_region.nextval, '商洛市', 27);

insert into bs_region
values (seq_region.nextval, '南宁市', 28);
insert into bs_region
values (seq_region.nextval, '柳州市', 28);
insert into bs_region
values (seq_region.nextval, '桂林市', 28);
insert into bs_region
values (seq_region.nextval, '梧州市', 28);
insert into bs_region
values (seq_region.nextval, '北海市', 28);
insert into bs_region
values (seq_region.nextval, '防城港市', 28);
insert into bs_region
values (seq_region.nextval, '钦州市', 28);
insert into bs_region
values (seq_region.nextval, '贵港市', 28);
insert into bs_region
values (seq_region.nextval, '玉林市', 28);
insert into bs_region
values (seq_region.nextval, '百色市', 28);
insert into bs_region
values (seq_region.nextval, '贺州市', 28);
insert into bs_region
values (seq_region.nextval, '河池市', 28);
insert into bs_region
values (seq_region.nextval, '来宾市', 28);
insert into bs_region
values (seq_region.nextval, '崇左市', 28);

insert into bs_region
values (seq_region.nextval, '拉萨市', 29);
insert into bs_region
values (seq_region.nextval, '那曲地区', 29);
insert into bs_region
values (seq_region.nextval, '昌都地区', 29);
insert into bs_region
values (seq_region.nextval, '山南地区', 29);
insert into bs_region
values (seq_region.nextval, '日喀则地区', 29);
insert into bs_region
values (seq_region.nextval, '阿里地区', 29);
insert into bs_region
values (seq_region.nextval, '林芝地区', 29);
--30宁夏回族自治区  ;
insert into bs_region
values (seq_region.nextval, '银川市', 30);
insert into bs_region
values (seq_region.nextval, '石嘴山市', 30);
insert into bs_region
values (seq_region.nextval, '吴忠市', 30);
insert into bs_region
values (seq_region.nextval, '固原市', 30);
insert into bs_region
values (seq_region.nextval, '中卫市', 30);

insert into bs_region
values (seq_region.nextval, '乌鲁木齐市', 31);
insert into bs_region
values (seq_region.nextval, '克拉玛依市', 31);
insert into bs_region
values (seq_region.nextval, '石河子市　', 31);
insert into bs_region
values (seq_region.nextval, '阿拉尔市', 31);
insert into bs_region
values (seq_region.nextval, '图木舒克市', 31);
insert into bs_region
values (seq_region.nextval, '五家渠市', 31);
insert into bs_region
values (seq_region.nextval, '吐鲁番市', 31);
insert into bs_region
values (seq_region.nextval, '阿克苏市', 31);
insert into bs_region
values (seq_region.nextval, '喀什市', 31);
insert into bs_region
values (seq_region.nextval, '哈密市', 31);
insert into bs_region
values (seq_region.nextval, '和田市', 31);
insert into bs_region
values (seq_region.nextval, '阿图什市', 31);
insert into bs_region
values (seq_region.nextval, '库尔勒市', 31);
insert into bs_region
values (seq_region.nextval, '昌吉市　', 31);
insert into bs_region
values (seq_region.nextval, '阜康市', 31);
insert into bs_region
values (seq_region.nextval, '米泉市', 31);
insert into bs_region
values (seq_region.nextval, '博乐市', 31);
insert into bs_region
values (seq_region.nextval, '伊宁市', 31);
insert into bs_region
values (seq_region.nextval, '奎屯市', 31);
insert into bs_region
values (seq_region.nextval, '塔城市', 31);
insert into bs_region
values (seq_region.nextval, '乌苏市', 31);
insert into bs_region
values (seq_region.nextval, '阿勒泰市', 31);

insert into bs_region
values (seq_region.nextval, '呼和浩特市', 32);
insert into bs_region
values (seq_region.nextval, '包头市', 32);
insert into bs_region
values (seq_region.nextval, '乌海市', 32);
insert into bs_region
values (seq_region.nextval, '赤峰市', 32);
insert into bs_region
values (seq_region.nextval, '通辽市', 32);
insert into bs_region
values (seq_region.nextval, '鄂尔多斯市', 32);
insert into bs_region
values (seq_region.nextval, '呼伦贝尔市', 32);
insert into bs_region
values (seq_region.nextval, '巴彦淖尔市', 32);
insert into bs_region
values (seq_region.nextval, '乌兰察布市', 32);
insert into bs_region
values (seq_region.nextval, '锡林郭勒盟', 32);
insert into bs_region
values (seq_region.nextval, '兴安盟', 32);
insert into bs_region
values (seq_region.nextval, '阿拉善盟', 32);

insert into bs_region
values (seq_region.nextval, '澳门特别行政区', 33);

insert into bs_region
values (seq_region.nextval, '香港特别行政区', 34);

commit;

实体类代码：

package com.pojo;
/**
 * 商品实体类
 */
public class Goods {
	    private Integer id;
	    private String name;
	    private String describe;
	    private Integer price;
	    private Integer stock;//库存
	    private String cover;	    
	    public Goods() {
			// TODO Auto-generated constructor stub
		}
		public Goods(Integer id, String name, String describe, Integer price, Integer stock, String cover) {
			super();
			this.id = id;
			this.name = name;
			this.describe = describe;
			this.price = price;
			this.stock = stock;
			this.cover = cover;
		}
		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 Integer getStock() {
			return stock;
		}
		public void setStock(Integer stock) {
			this.stock = stock;
		}
		public String getCover() {
			return cover;
		}
		public void setCover(String cover) {
			this.cover = cover;
		}
		@Override
		public String toString() {
			return "Goods [id=" + id + ", name=" + name + ", describe=" + describe + ", price=" + price + ", stock="
					+ stock + ", cover=" + cover + "]";
		}	    
}

package com.pojo;
import java.util.List;
/**
 * 用来放商品集合，和最大的页数
 */
public class GoodsVo {
	private List<Goods> list;
    private Integer total;
    public GoodsVo() {
		// TODO Auto-generated constructor stub
	}
	public GoodsVo(List<Goods> list, Integer total) {
		super();
		this.list = list;
		this.total = 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 + "]";
	}   
}

dao层代码：

package com.dao;
import java.util.List;
import com.pojo.Goods;
public interface IGoodsDao {
	List<Goods> list(int page, int size);
    public int total();	
}

package com.dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.dao.IGoodsDao;
import com.pojo.Goods;
import com.util.DBHelper;

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=DBHelper.getCon();
	            ps=con.prepareStatement("select * from (" +
	                    "    select a.*,ROWNUM 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);
	            }
	            //System.out.println(list+"aa");
	        }catch (Exception e){
	            e.printStackTrace();
	        }finally {
	            DBHelper.close(con,ps,rs);
	        }
	        return list;
	    }
	@Override
	public int total() {
		try {
			con=DBHelper.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 {
			DBHelper.close(con, ps, rs);
		}
		return 0;
	}
}

biz层代码：

package com.biz;
import java.util.List;
import com.pojo.Goods;
public interface IGoodsBiz {
	List<Goods> list(int page, int size);
    public int total();    
}

package com.biz.impl;
import java.util.List;
import com.biz.IGoodsBiz;
import com.dao.IGoodsDao;
import com.dao.impl.GoodsDaoImpl;
import com.pojo.Goods;
public class GoodsBizImpl implements IGoodsBiz{	
    IGoodsDao dao=new GoodsDaoImpl();
	@Override
	public List<Goods> list(int page, int size) {
		return dao.list(page, size);
	}
	@Override
	public int total() {
		return dao.total();
	}
}

表示层代码：

package com.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.biz.IGoodsBiz;
import com.biz.impl.GoodsBizImpl;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.pojo.Goods;
import com.pojo.GoodsVo;

@WebServlet("/goods.do")
public class GoodsServlet extends HttpServlet{
	
	private IGoodsBiz goodsBiz = new GoodsBizImpl();
	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();
        //根据size计算最大的页数
        total = (int) Math.ceil(total * 1.0 / size);
        //封装Vo对象
        GoodsVo gv = new GoodsVo(list, total);
        //然后通过响应丢出去
        resp.setCharacterEncoding("utf-8");
        PrintWriter out = resp.getWriter();
        //对象->json字符串
        out.println(mapper.writeValueAsString(gv));
	}	
}

前端界面代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <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 class="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>

给大家展示一下省市联动功能的效果👇

 

案例：使用Ajax以及Bootsrtap实现无刷新分页功能

 Ajax上期介绍了，那么，什么是Bootsrtap呢？

Bootsrtap简介

Bootsrtap是一种Web框架

而且是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

大家可以看一下目前最新版本的中文网站，链接贴在下面了

Bootstrap5 中文手册-俺老刘

可以在官网上看到有关于它的简介和用法

红色方框里的意思是Bootstrap开发出的网页既可以用于网页界面又可以适用于手机页面，这样正是Bootstrap受欢迎的原因

 这里的使用方法简单来说就是

1.先将下载好的Bootstrap文件复制到拿到web项目中

 2.在需要使用Bootstrap的界面进行导包操作

<!-- 必须要在所有CSS之前导不然不生效 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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>

回归案例：使用Ajax以及Bootsrtap实现无刷新分页功能

实现代码展示（三层架构）

Oracle代码：

create table bs_GOODS
(
    ID       NUMBER                                      not null primary key,
    NAME     VARCHAR2(20)                                not null,
    DESCRIBE VARCHAR2(100) default '此商品暂时没有介绍'           not null,
    PRICE    NUMBER                                      not null,
    stock    number        default 0                     not null,
    cover    varchar2(200) default '/images/default.jpg' not null
);

comment on table bs_GOODS is '商品表';
comment on column bs_GOODS.ID is '商品编号';
comment on column bs_GOODS.NAME is '商品名称';
comment on column bs_GOODS.DESCRIBE is '商品描述';
comment on column bs_GOODS.PRICE is '商品价格';
comment on column bs_GOODS.stock is '商品库存';
comment on column bs_GOODS.cover is '商品封面';

select seq_goods.nextval from dual;

insert into bs_GOODS
values (seq_goods.nextval, '珍珠奶茶', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '芋泥奶茶', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '柠檬水', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '葡萄养乐多', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '雪王咖啡', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '双炫弹筒', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '草莓大圣诞', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '蜜桃四季春', '冰冰好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '满杯百香果', '冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '红豆奶茶', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '西米奶茶', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '手打鲜橙', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '芝士奶盖绿茶', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '芝士奶盖红茶', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '黄桃大圣诞', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '招牌烧仙草', '很好喝', 99, 100,'a');
into bs_GOODS
values (seq_goods.nextval, '黄桃大圣诞', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '招牌烧仙草', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '巧克力大圣诞', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '招牌豆花', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '摩天脆脆', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '杨枝甘露', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '双拼摇摇奶昔', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '柠檬红茶', '很好喝', 99, 100,'a');

select * from bs_GOODS;
select * from ( select a.*,ROWNUM rid from BS_GOODS a ) b where rid between 1 and 3;
commit;

实体类代码：

package com.pojo;

public class Region {
	
	 private Integer id;
	 private String name;//省份名或市名
	 private Integer rid;//附属于id的rid
	 
	 public Region() {
		// TODO Auto-generated constructor stub
	}

	public Region(Integer id, String name, Integer rid) {
		super();
		this.id = id;
		this.name = name;
		this.rid = rid;
	}

	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 Integer getRid() {
		return rid;
	}

	public void setRid(Integer rid) {
		this.rid = rid;
	}

	@Override
	public String toString() {
		return "Region [id=" + id + ", name=" + name + ", rid=" + rid + "]";
	}
	 
}

dao层代码：

package com.dao;
import java.util.List;
import com.pojo.Region;

public interface IRegionDao {	
	List<Region> list(int rid);	
}

package com.dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.dao.IRegionDao;
import com.pojo.Region;
import com.util.DBHelper;

public class RegionDaoImpl implements IRegionDao{
	
	private Connection con;
	private PreparedStatement ps;
	private ResultSet rs;
	
	/**
	 * 传入rid(所属id)
	 * 返回：在数据库中查到的省份/市
	 */
	@Override
	public List<Region> list(int rid) {
		List<Region> list=new ArrayList<>();
		 try {
	            con=DBHelper.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 {
	            DBHelper.close(con,ps,rs);
	        }
		return list;
	}

}

biz层代码：

package com.biz;
import java.util.List;
import com.pojo.Region;

/**
 *省市联动
 */
public interface IRegionBiz {	
	List<Region> list(int rid);	
}

package com.biz.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.biz.IRegionBiz;
import com.dao.IRegionDao;
import com.dao.impl.RegionDaoImpl;
import com.pojo.Region;
import com.util.DBHelper;

public class RegionBizImpl implements IRegionBiz{

	IRegionDao dao=new RegionDaoImpl();  
	
	@Override
	public List<Region> list(int rid) {
		return dao.list(rid);
	}
	
}

表示层代码：

package com.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.biz.IRegionBiz;
import com.biz.impl.RegionBizImpl;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.pojo.Region;

@WebServlet("/region.do")
public class RegionServlet extends HttpServlet{
	
	private IRegionBiz regionBiz=new RegionBizImpl();
	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 {
		//先拿到rid,ajax传来的
        Integer rid = Integer.parseInt(req.getParameter("rid"));
        //根据rid查询对应的结果
        List<Region> list = regionBiz.list(rid);
        //设置响应格式的编码
        resp.setCharacterEncoding("utf-8");
        //通过响应对象丢给前端
        PrintWriter out = resp.getWriter();
        //对象丢给前端的应该不是普通字符串,是json字符串
        String json = mapper.writeValueAsString(list);
        out.println(json);
	}
	
}

前端界面代码：

<%@ 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>
	let province=$("#province") 
	let city=$("#city")
	function changeCity(){//市的改变，随着省份改变而改变
		//异步请求
		$.get(
			"region.do",
			{rid:province.val()},//将省份下拉框的值传给后端
			//接受后端响应,回调函数
			(resp)=>{
				//清空原来的市
				city.empty()
			    //遍历数组  循环添加新的市
			    for(let r of resp){//拿到响应集合中的name(省份名或市名)属性
			    	city.append("<option value='"+r.id+"'>"+r.name+"</option>")
			    	}
		    	},
		    "json"
			)
		}
	
	//设置第一次显示页面时默认的省份和市
	$(()=>{//jquery的加载事件
		$.get("region.do",{rid:0},(resp)=>{
			//console.log("jquery的加载事件");
			//清空原来的省
			province.empty()
			//遍历数组  循环添加内容
			for(let r of resp){
				province.append("<option value='"+r.id+"'>"+r.name+"</option>")
			    //省份遍历成功了
			    //接下来遍历城市
           	    changeCity()//调用函数
			}
		},"json")
	})
</script>
</body>
</html>

 最后，给大家展示一下无刷新分页功能的效果👇

这里的界面会比省市联动功能的界面更好看一些，因为这里使用了Bootsrtap来美化界面😜 

---

 感 谢 阅 读 ^_^