Ajax实现省市区三级联动-FinClip官网

Ajax实现省市区三级联动

网友投稿 636 2022-12-28

Ajax实现省市区三级联动

目录需要的jar包：数据库代码：省：市：区：页面展示代码：DBHelper类：总结

需要的jar包：

数据库代码：

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,"中原区",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 {

@Override

public 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;

}

@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 plist=pid.findAll();

//把这个省份的集合转换成json格式的数据发送到前端页面

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 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 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-ame = 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-ame = 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 list = cid.findAllCity(Integer.parseInt(id));

//把城市的集合转换成json格式的字符串发送到前端页面

resp.getWriter().write(JSONObject.toJSONString(list));

}

@Override

protected 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 {

@Override

public 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;

}

@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 list=did.findAllStreet(Integer.parseInt(id));

//把这个省份的集合转换成json格式的数据发送到前端页面

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" %>

省

市

区

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 block

e.printStackTrace();

}

return conn;

}

// 关闭数据库连接

public static void getClose() {

try {

if (conn != null) {

conn.close();

}

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

// 测试数据库连接

public static void main(String[] args) {

System.out.println(getConn());

if (getConn()!=null) {

System.out.println("链接成功");

}

总结

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

微前端架构如何改变企业的开发模式与效率提升

636 2022-12-28

Ajax实现省市区三级联动

react 前端框架如何驱动企业数字化转型与创新发展

微前端架构如何改变企业的开发模式与效率提升

轻量级前端框架助力开发者提升项目效率与性能

最近发表

更多内容

小程序SDK

Finclip技术文档

小程序开发

小程序容器

小程序框架

Finclip小程序平台

Finclip用户投稿

车联网

推荐文章

小程序SDK是什么意思？小程序sdk和插件有什么区别？

小程序支付功能怎么实现？

企业app开发流程是什么？

app运营模式有哪些？

小程序多端引流怎么做？

小程序生态分析的机会和威胁

Flutter入门这一篇效率文章就够了

原生与跨平台解决方案分析,跨平台软件开发技术方案

热更新技术：让软件更新变得更加轻松快速

解决方案

银行解决方案

证券解决方案

互联网解决方案

政企OA解决方案

科技解决方案

loT解决方案

信任解决方案

热评文章

AppCan:基于混合模式的移动应用开发,移动混合模

Hybrid App混合模式开发的了解

小程序容器技术助力券商数字营销突围，小程序容器化的意

用mpvue开发微信小程序基础知识（vue.js开发

小程序多端框架全面测评对比，强烈推荐！

券商app架构 - 解析券商应用程序的构建与设计