Ajax实现省市区三级联动 Ajax实现省市区三级联动

需要的jar包：

数据库代码：
省：
市：
区：
页面展示代码：
DBHelper类：

总结

【Ajax实现省市区三级联动】
需要的jar包：

文章图片

文章图片

数据库代码：

create database school character set utf8; use school; CREATE tableprovice (pid INT PRIMARY KEYauto_increment,pname varchar(20)); INSERT into provice VALUES (null,"河南省"); INSERT into provice VALUES (null,"山东省"); INSERT into provice VALUES (null,"河北省"); CREATE tablecity (cid INT PRIMARY KEYauto_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 tablestreet (sid INT PRIMARY KEYauto_increment,sname varchar(20),cid int); -- 郑州市INSERT into street VALUES (null,"中原区",1); INSERT into street VALUES (null,"二七区",1); INSERT into street VALUES (null,"管城回族区",1); -- 开封市INSERT into street VALUES (null,"龙亭区",2); INSERT into street VALUES (null,"顺河回族区",2); INSERT into street VALUES (null,"鼓楼区",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,"七区五市",5); INSERT into street VALUES (null,"市南区",5); INSERT into street VALUES (null,"市北区",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 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 {@Overridepublic List findAll() {Connection conn = DBHelper.getConn(); List list = new ArrayList(); 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; }@Overridepublic 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(); }@Overrideprotected 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 plist=pid.findAll(); //把这个省份的集合转换成json格式的数据发送到前端页面resp.getWriter().write(JSONObject.toJSONString(plist)); }@Overrideprotected 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 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 {@Overridepublic List findAllCity(int pid) {Connection conn = DBHelper.getConn(); List list = new ArrayList(); 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; }@Overridepublic 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{@Overrideprotected 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 list = cid.findAllCity(Integer.parseInt(id)); //把城市的集合转换成json格式的字符串发送到前端页面resp.getWriter().write(JSONObject.toJSONString(list)); }@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {super.doPost(req, resp); }}

区：

package cn.hp.dao; import cn.hp.model.Street; import java.util.List; public interface StreetInfoDao {public List 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 {@Overridepublic List findAllStreet(int cid) {Connection conn = DBHelper.getConn(); List list = new ArrayList(); 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; }@Overridepublic 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(); }@Overrideprotected 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 list=did.findAllStreet(Integer.parseInt(id)); //把这个省份的集合转换成json格式的数据发送到前端页面resp.getWriter().write(JSONObject.toJSONString(list)); }@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {super.doPost(req, resp); }}

页面展示代码：

Title省市区

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; // 创建数据库连接 public static Connection getConn() {try {Class.forName(Driver); conn = DriverManager.getConnection(Url, user, pwd); } catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace(); }return conn; } // 关闭数据库连接 public static void getClose() {try {if (conn != null) {conn.close(); }} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace(); } } // 测试数据库连接 public static void main(String[] args) {System.out.println(getConn()); if (getConn()!=null) {System.out.println("链接成功"); } }}

总结本篇文章就到这里了，希望能给你带来帮助，也希望你能够多多关注脚本之家的更多内容！