Ajax實現(xiàn)省市區(qū)三級聯(lián)動
更新時間：2021年07月12日 09:57:11 作者：wbcra
這篇文章主要為大家詳細介紹了jQuery ajax實現(xiàn)省市縣三級聯(lián)動的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下,希望能幫助到你
需要的jar包：
數(shù)據(jù)庫代碼：
create database school character set utf8; use school; CREATE table provice ( pid INT PRIMARY KEY auto_increment, pname varchar(20) ); INSERT into provice VALUES (null,"河南省"); INSERT into provice VALUES (null,"山東省"); INSERT into provice VALUES (null,"河北省"); CREATE table city ( cid INT PRIMARY KEY auto_increment, cname varchar(20), pid int ); -- 河南省 INSERT into city VALUES (null,"鄭州市",1); INSERT into city VALUES (null,"開封市",1); INSERT into city VALUES (null,"洛陽市",1); -- 山東 INSERT into city VALUES (null,"濟南市",2); INSERT into city VALUES (null,"青島市",2); INSERT into city VALUES (null,"淄博市",2); -- 河北 INSERT into city VALUES (null,"石家莊市",3); INSERT into city VALUES (null,"唐山市",3); INSERT into city VALUES (null,"秦皇島市",3); CREATE table street ( sid INT PRIMARY KEY auto_increment, sname varchar(20), cid int ); -- 鄭州市 INSERT into street VALUES (null,"中原區(qū)",1); INSERT into street VALUES (null,"二七區(qū)",1); INSERT into street VALUES (null,"管城回族區(qū)",1); -- 開封市 INSERT into street VALUES (null,"龍亭區(qū)",2); INSERT into street VALUES (null,"順河回族區(qū)",2); INSERT into street VALUES (null,"鼓樓區(qū)",2); -- 洛陽市 INSERT into street VALUES (null,"汝陽",3); INSERT into street VALUES (null,"宜陽",3); INSERT into street VALUES (null,"洛寧",3); -- 濟南市 INSERT into street VALUES (null,"商河縣",4); INSERT into street VALUES (null,"濟陽縣",4); INSERT into street VALUES (null,"平陰縣",4); -- 青島市 INSERT into street VALUES (null,"七區(qū)五市",5); INSERT into street VALUES (null,"市南區(qū)",5); INSERT into street VALUES (null,"市北區(qū)",5); -- 淄博市 INSERT into street VALUES (null,"博山",6); INSERT into street VALUES (null,"周村",6); INSERT into street VALUES (null,"臨淄",6); -- 石家莊市 INSERT into street VALUES (null,"正定縣",7); INSERT into street VALUES (null,"行唐縣",7); INSERT into street VALUES (null,"靈壽縣",7); -- 唐山市 INSERT into street VALUES (null,"樂亭縣",8); INSERT into street VALUES (null,"遷西縣",8); INSERT into street VALUES (null,"玉田縣",8); -- 秦皇島市 INSERT into street VALUES (null,"青龍滿族自治縣",9); INSERT into street VALUES (null,"昌黎縣",9); INSERT into street VALUES (null,"盧龍縣",9);
省：
package cn.hp.dao;
import cn.hp.model.Provice;
import java.util.List;
public interface ProviceInfoDao {
public List<Provice> findAll();
}
package cn.hp.impl;
import cn.hp.dao.ProviceInfoDao;
import cn.hp.model.Provice;
import cn.hp.util.DBHelper;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
public class ProviceInfoDaoImpl implements ProviceInfoDao {
@Override
public List<Provice> findAll() {
Connection conn = DBHelper.getConn();
List<Provice> list = new ArrayList<Provice>();
String sql = "select * from provice";
try {
PreparedStatement ps=conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
while (rs.next()){
Provice p = new Provice();
p.setPid(rs.getInt(1));
p.setPname(rs.getString(2));
list.add(p);
}
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
}
package cn.hp.model;
public class Provice {
private int pid;
private String pname;
public Provice() {
}
public Provice(int pid, String pname) {
this.pid = pid;
this.pname = pname;
}
@Override
public String toString() {
return "Provice{" +
"pid=" + pid +
", pname='" + pname + '\'' +
'}';
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
public String getPname() {
return pname;
}
public void setPname(String pname) {
this.pname = pname;
}
}
package cn.hp.servlet;
import cn.hp.dao.ProviceInfoDao;
import cn.hp.impl.ProviceInfoDaoImpl;
import cn.hp.model.Provice;
import com.alibaba.fastjson.JSONObject;
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 java.io.IOException;
import java.util.List;
@WebServlet("/findprovice")
public class FindProviceServlet extends HttpServlet {
public FindProviceServlet() {
super();
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// super.doGet(req, resp);
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
ProviceInfoDao pid = new ProviceInfoDaoImpl();
List<Provice> plist=pid.findAll();
//把這個省份的集合轉換成json格式的數(shù)據(jù)發(fā)送到前端頁面
resp.getWriter().write(JSONObject.toJSONString(plist));
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.doPost(req, resp);
}
}
市：
package cn.hp.dao;
import cn.hp.model.City;
import java.util.List;
public interface CityInfoDao {
public List<City> findAllCity(int pid);
}
package cn.hp.impl;
import cn.hp.dao.CityInfoDao;
import cn.hp.model.City;
import cn.hp.model.Provice;
import cn.hp.util.DBHelper;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
public class CityInfoDaoImpl implements CityInfoDao {
@Override
public List<City> findAllCity(int pid) {
Connection conn = DBHelper.getConn();
List<City> list = new ArrayList<City>();
String sql = "select * from city where pid=?";
try {
PreparedStatement ps=conn.prepareStatement(sql);
ps.setInt(1,pid);
ResultSet rs = ps.executeQuery();
while (rs.next()){
City c=new City();
c.setCid(rs.getInt(1));
c.setCname(rs.getString(2));
c.setPid(rs.getInt(3));
list.add(c);
}
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
}
package cn.hp.model;
public class City {
private int cid;
private String cname;
private int pid;
public City() {
}
public City(int cid, String cname, int pid) {
this.cid = cid;
this.cname = cname;
this.pid = pid;
}
@Override
public String toString() {
return "City{" +
"cid=" + cid +
", cname='" + cname + '\'' +
", pid=" + pid +
'}';
}
public int getCid() {
return cid;
}
public void setCid(int cid) {
this.cid = cid;
}
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
}
package cn.hp.servlet;
import cn.hp.dao.CityInfoDao;
import cn.hp.impl.CityInfoDaoImpl;
import cn.hp.model.City;
import com.alibaba.fastjson.JSONObject;
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 java.io.IOException;
import java.util.List;
@WebServlet("/findcitypid")
public class FindCityPidServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String id = req.getParameter("id");
CityInfoDao cid = new CityInfoDaoImpl();
List<City> list = cid.findAllCity(Integer.parseInt(id));
//把城市的集合轉換成json格式的字符串發(fā)送到前端頁面
resp.getWriter().write(JSONObject.toJSONString(list));
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.doPost(req, resp);
}
}
區(qū)：
package cn.hp.dao;
import cn.hp.model.Street;
import java.util.List;
public interface StreetInfoDao {
public List<Street> findAllStreet(int cid);
}
package cn.hp.impl;
import cn.hp.dao.StreetInfoDao;
import cn.hp.model.Provice;
import cn.hp.model.Street;
import cn.hp.util.DBHelper;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
public class StreetInfoDaoImpl implements StreetInfoDao {
@Override
public List<Street> findAllStreet(int cid) {
Connection conn = DBHelper.getConn();
List<Street> list = new ArrayList<Street>();
String sql = "select * from Street where cid=?";
try {
PreparedStatement ps=conn.prepareStatement(sql);
ps.setInt(1,cid);
ResultSet rs = ps.executeQuery();
while (rs.next()){
Street s = new Street();
s.setDid(rs.getInt(1));
s.setDname(rs.getString(2));
s.setCid(rs.getInt(3));
list.add(s);
}
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
}
package cn.hp.model;
public class Street {
private int did;
private String dname;
private int cid;
public Street() {
}
public Street(int did, String dname, int cid) {
this.did = did;
this.dname = dname;
this.cid = cid;
}
@Override
public String toString() {
return "Street{" +
"did=" + did +
", dname='" + dname + '\'' +
", cid=" + cid +
'}';
}
public int getDid() {
return did;
}
public void setDid(int did) {
this.did = did;
}
public String getDname() {
return dname;
}
public void setDname(String dname) {
this.dname = dname;
}
public int getCid() {
return cid;
}
public void setCid(int cid) {
this.cid = cid;
}
}
package cn.hp.servlet;
import cn.hp.dao.CityInfoDao;
import cn.hp.dao.ProviceInfoDao;
import cn.hp.dao.StreetInfoDao;
import cn.hp.impl.CityInfoDaoImpl;
import cn.hp.impl.ProviceInfoDaoImpl;
import cn.hp.impl.StreetInfoDaoImpl;
import cn.hp.model.City;
import cn.hp.model.Provice;
import cn.hp.model.Street;
import com.alibaba.fastjson.JSONObject;
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 java.io.IOException;
import java.util.List;
@WebServlet("/findstreetdid")
public class FindStreetServlet extends HttpServlet {
public FindStreetServlet() {
super();
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String id = req.getParameter("id");
StreetInfoDao did = new StreetInfoDaoImpl();
List<Street> list=did.findAllStreet(Integer.parseInt(id));
//把這個省份的集合轉換成json格式的數(shù)據(jù)發(fā)送到前端頁面
resp.getWriter().write(JSONObject.toJSONString(list));
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.doPost(req, resp);
}
}
頁面展示代碼：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="js/jquery-1.8.3.js"></script>
<html>
<head>
<title>Title</title>
</head>
<body>
<script>
$(function () {
$.ajax({
type:"get",
url:"findprovice",
dataType:"json",
success:function (data) {//data的值就是從后端發(fā)送過來的json格式的字符串
//拿到當前省份的元素對象
var obj = $("#provice");
for (var i =0;i<data.length;i++){
var ob="<option value='"+data[i].pid+"'>"+data[i].pname+"</option>";
obj.append(ob);
}
}
})
})
</script>
<select name="provice" id="provice">
<option value="0">請選擇</option>
</select>省
<select name="city" id="city">
<option value="0">請選擇</option>
</select>市
<select name="street" id="street">
<option value="0">請選擇</option>
</select>區(qū)
<script>
$("#provice").change(function () {
$("#city option").remove();
$.ajax({
type: "get",
url:"findcitypid?id="+$("#provice").val(),
dataType: "json",
success:function (data) {
var obj = $("#city");
for (var i =0;i<data.length;i++){
var ob="<option value='"+data[i].cid+"'>"+data[i].cname+"</option>";
obj.append(ob);
}
}
})
})
</script>
<script>
$("#provice").change(function () {
$("#street option").remove();
$.ajax({
type: "get",
url:"findstreetdid?id="+$("#provice").val(),
dataType: "json",
success:function (data) {
var obj = $("#street");
for (var i =0;i<data.length;i++){
var ob="<option value='"+data[i].did+"'>"+data[i].dname+"</option>";
obj.append(ob);
}
}
})
})
</script>
</body>
</html>
DBHelper類：
package cn.hp.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DBHelper {
private static String Driver = "com.mysql.jdbc.Driver";
private static String Url = "jdbc:mysql://localhost:3306/school?characterEncoding=utf8";
private static String user = "root";
private static String pwd = "root";
public static Connection conn;
// 創(chuàng)建數(shù)據(jù)庫連接
public static Connection getConn() {
try {
Class.forName(Driver);
conn = DriverManager.getConnection(Url, user, pwd);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return conn;
}
// 關閉數(shù)據(jù)庫連接
public static void getClose() {
try {
if (conn != null) {
conn.close();
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
// 測試數(shù)據(jù)庫連接
public static void main(String[] args) {
System.out.println(getConn());
if (getConn()!=null) {
System.out.println("鏈接成功");
}
}
}
總結
本篇文章就到這里了，希望能給你帶來幫助，也希望你能夠多多關注腳本之家的更多內(nèi)容！
相關文章
這篇文章主要介紹了springboot靜態(tài)資源的配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
本篇文章給大家通過理論原理等方便徹底分析了Java常量池的相關知識，有興趣的朋友閱讀學習下吧。2017-12-12
這篇文章主要介紹了springboot 如何禁用某項健康檢查的操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了Aspectj與Spring AOP的對比分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
這篇文章主要介紹了idea解決程序包不存在報錯的八種解決方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02
SpringBoot如何使用RateLimiter通過AOP方式進行限流
這篇文章主要介紹了SpringBoot如何使用RateLimiter通過AOP方式進行限流，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細介紹了java實現(xiàn)微信App支付服務端，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
今天帶大家了解一下Java稀疏數(shù)組的相關知識,文中有非常詳細的介紹及代碼示例,對正在學習java的小伙伴們有很好地幫助,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Java 二分法檢索算法代碼實現(xiàn)詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
SpringCloud服務之間Feign調(diào)用不會帶上請求頭header的解決方法
在Spring?Cloud中,使用Feign進行服務之間的調(diào)用時,默認情況下是不會傳遞header的,這篇文章給大家介紹SpringCloud服務之間Feign調(diào)用不會帶上請求頭header的解決方法,感興趣的朋友一起看看吧2024-01-01