使用Ajax实现省市联动Bootstrap的基本使用
生活随笔
收集整理的這篇文章主要介紹了
使用Ajax实现省市联动Bootstrap的基本使用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
上節(jié)課我們已經講了Ajax了，現(xiàn)在我們來使用Ajax來實現(xiàn)省市聯(lián)動以及bootstrap的一些基本使用
目錄
一.案例（使用Ajax實現(xiàn)省市聯(lián)動）
二.Bootstrap的基本介紹
三.bootstrap——案例（使用Ajax以及Bootsrtap實現(xiàn)無刷新分頁功能）
一.案例（使用Ajax實現(xiàn)省市聯(lián)動）
Oracle數(shù)據(jù)庫代碼：
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, '廣西壯族自治區(qū)', 0); insert into bs_region values (seq_region.nextval, '西藏自治區(qū)', 0); insert into bs_region values (seq_region.nextval, '寧夏回族自治區(qū)', 0); insert into bs_region values (seq_region.nextval, '新疆維吾爾自治區(qū)', 0); insert into bs_region values (seq_region.nextval, '內蒙古自治區(qū)', 0); insert into bs_region values (seq_region.nextval, '澳門特別行政區(qū)', 0); insert into bs_region values (seq_region.nextval, '香港特別行政區(qū)', 0);--插入各個省的城市數(shù)據(jù) --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);select * from bs_region--5河北省(2005年轄：11個地級市，36個市轄區(qū)、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, '大興安嶺地區(qū)', 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, '鎮(zhèn)江市', 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, '景德鎮(zhèn)市', 15); insert into bs_region values (seq_region.nextval, '萍鄉(xiāng)市', 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, '新鄉(xiāng)市', 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, '神農架林區(qū)', 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, '銅仁地區(qū)', 23); insert into bs_region values (seq_region.nextval, '畢節(jié)地區(qū)', 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, '海東地區(qū)', 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, '那曲地區(qū)', 29); insert into bs_region values (seq_region.nextval, '昌都地區(qū)', 29); insert into bs_region values (seq_region.nextval, '山南地區(qū)', 29); insert into bs_region values (seq_region.nextval, '日喀則地區(qū)', 29); insert into bs_region values (seq_region.nextval, '阿里地區(qū)', 29); insert into bs_region values (seq_region.nextval, '林芝地區(qū)', 29); --30寧夏回族自治區(qū) ; 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, '中衛(wèi)市', 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, '澳門特別行政區(qū)', 33);insert into bs_region values (seq_region.nextval, '香港特別行政區(qū)', 34);commit;?實體類代碼
🍍🍍?bolRegion （com.zking.pojo）
package com.zking.pojo;public class Region {private Integer id;private String name;private Integer rid;public Region() {}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;}@Overridepublic String toString() {return "Region [id=" + id + ", name=" + name + ", rid=" + rid + "]";}}數(shù)據(jù)庫訪問層
🍊🍊 IRegionDao（com.zking.dao）
package com.zking.dao;import java.util.List;import com.zking.pojo.Region;public interface IRegionDao {//根據(jù)id進行查詢List<Region> list(int rid);}🍒🍒 RegionDaoImpl（com.zking.daoimpl）
package com.zking.daoimpl;import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.util.ArrayList; import java.util.List;import com.zking.dao.IRegionDao; import com.zking.pojo.Region; import com.zking.util.DBHelper;public class RegionDaoImpl implements IRegionDao{private Connection con;private PreparedStatement ps;private ResultSet rs;//根據(jù)id進行查詢public List<Region> list(int rid) {List<Region> list=new ArrayList<Region>();try {con=DBHelper.getCon();ps=con.prepareStatement("select * from BS_REGION where rid=?");ps.setInt(1,rid);rs=ps.executeQuery();while(rs.next()) {Region r=new Region();r.setId(rs.getInt(1));r.setName(rs.getString(2));r.setRid(rs.getInt(3));list.add(r);}} catch (Exception e) {e.printStackTrace();}finally {DBHelper.getClose(con, ps, rs);}return list;}}業(yè)務邏輯層
🍻🍻IRegionBiz (com.zking.biz)
package com.zking.biz;import java.util.List;import com.zking.pojo.Region;public interface IRegionBiz {List<Region> list(int rid);}😜😜RegionBizImpl(com.zking.bizimpl)
package com.zking.bizimpl;import java.util.List;import com.zking.biz.IRegionBiz; import com.zking.dao.IRegionDao; import com.zking.daoimpl.RegionDaoImpl; import com.zking.pojo.Region;public class RegionBizImpl implements IRegionBiz{IRegionDao dao=new RegionDaoImpl();public List<Region> list(int rid) {return dao.list(rid);} }前端代碼
? ?🌊?🌊? province（jsp）
<%--User: hghDate: 2022/4/30Time: 14:16 --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>Title</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()//遍歷數(shù)組 循環(huán)添加內容for(let r of resp){city.append("<option value='"+r.id+"'>"+r.name+"</option>")}},"json")}//jquery的加載事件$(()=>{//顯示省份$.get('region.do',{rid:0},(resp)=>{//清空原來的內容province.empty()//遍歷數(shù)組 循環(huán)添加內容for(let r of resp){province.append("<option value='"+r.id+"'>"+r.name+"</option>")}//省份遍歷成功了//接下來遍歷城市changeCity()},"json")}) </script> </body> </html>? 過濾器
? 🍉?🍉 ?RegionServlet（com.zking.servlet）
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.IRegionBiz; import com.zking.bizimpl.RegionBizImpl; import com.zking.pojo.Region;/*** * @author zjjt*省市聯(lián)動的操作過濾器*/ @WebServlet("/region.do") public class RegionServlet extends HttpServlet{private IRegionBiz biz=new RegionBizImpl();private ObjectMapper mapper=new ObjectMapper();protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//先拿到ridInteger rid=Integer.parseInt(req.getParameter("rid"));//根據(jù)rid查詢對應的結果List<Region> list=biz.list(rid);//設置編碼resp.setCharacterEncoding("utf-8");//通過響應丟出去PrintWriter out=resp.getWriter();//應該不是普通字符，是json字符串String json=mapper.writeValueAsString(list);out.println(json);}}二.Bootstrap的基本介紹
- ?bootstrap是什么？
Bootstrap是一個用于快速開發(fā)Web應用程序和網站的前端框架，是基于html和JavaScript、css三者開發(fā)的框架，主要用于響應式網站上的結構和布局
- bootstrap的歷史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的
Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產品
?為什么使用 Bootstrap？
- 移動設備優(yōu)先：自 Bootstrap 3 起，框架包含了貫穿于整個庫的移動設備優(yōu)先的樣式。
- 瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。
- 容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
- 響應式設計：Bootstrap 的響應式 CSS 能夠自適應于臺式機、平板電腦和手機。
- 它為開發(fā)人員創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案。
-
它包含了功能強大的內置組件，易于定制。
-
它還提供了基于 Web 的定制。
-
它是開源的。
?
下面這個主界是bootstrap的最新版：
?
三.bootstrap——案例（使用Ajax以及Bootsrtap實現(xiàn)無刷新分頁功能）
🍈🍈1.準備工作：
將下載好的bootstrap壓縮包壓縮，然后再把壓縮好的文件夾復制到web項目中
?🍎🍎2.進行導包操作
<!-- 必需加這個 必須的 meta 標簽 --><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" integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous"> <!-- 導入js --> <script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>🍋🍋3.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, '葡萄養(yǎng)樂多', '冰冰很好喝', 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');commit;實體類代碼：
🍟🍟Goods（com.zking.pojo）
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;}@Overridepublic String toString() {return "Goods [id=" + id + ", name=" + name + ", describe=" + describe + ", price=" + price + ", stock="+ stock + ", cover=" + cover + "]";} }🍇🍇GoodsVo（com.zking.vo）
package com.pojo; import java.util.List; /*** 用來放商品集合，和最大的頁數(shù)*/ 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;}@Overridepublic String toString() {return "GoodsVo [list=" + list + ", total=" + total + "]";} }? ?🍊🍊 IGoodsDao (com.zking.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(); }?🍄🍄GoodsDaoImpl（com.zking.daoimpl）
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;@Overridepublic 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;}@Overridepublic 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;} }?🌿🌿 IGoodsBiz（com.zking.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(); }🍑🍑GoodsBizImpl（com.zking.bizimpl）
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();@Overridepublic List<Goods> list(int page, int size) {return dao.list(page, size);}@Overridepublic int total() {return dao.total();} }? 前端代碼
?📖📖 index（jsp）
<%@ 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")//清除表格數(shù)據(jù)table.find("tr").has("td").empty()//生成表格數(shù)據(jù)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>`)}//生成分頁條 【只有總條數(shù)發(fā)生改變】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")}})}//頁面加載函數(shù)$(() => {changePage(1);}) </script> </body> </html>? ?📃📃GoodsServlet（com.zking.servlet）
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();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//先拿到請求的頁數(shù)和行數(shù)int size = 3;int page = 1;String obj = req.getParameter("page");if (obj != null) {page = Integer.parseInt(obj);}//拿到數(shù)據(jù)庫的數(shù)據(jù)List<Goods> list = goodsBiz.list(page, size);//拿到數(shù)據(jù)庫的總條數(shù)int total = goodsBiz.total();//根據(jù)size計算最大的頁數(shù)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));} }今天的代碼就到這里啦~咱們下期見！
今天也要記得微笑呀.
總結
以上是生活随笔為你收集整理的使用Ajax实现省市联动Bootstrap的基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何快速转行产品经理 少走弯路
- 下一篇： 长板坡赵云