Ajax实现省市区 * 联动
作者：wbcra 发布时间：2023-01-14 05:09:58
标签：Ajax,省市区,联动
需要的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<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格式的数据发送到前端页面
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格式的字符串发送到前端页面
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<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格式的数据发送到前端页面
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的值就是从后端发送过来的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>区
<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;
// 创建数据库连接
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("链接成功");
}
}
}
来源：https://blog.csdn.net/wbcra/article/details/118075890
0
投稿猜你喜欢
一、为什么需要GC应用程序对资源操作，通常简单分为以下几个步骤：1、为对应的资源分配内存2、初始化内存3、使用资源4、清理资源5、释放内存应- 说明：曾经在网上看过花样繁多的分页，很多都号称如何通用，但很多时候往往不尽如人意：有在分页类中还加入URL地址信息的，有在分页类中还进行分页
- ArrayList集合在查询元素时速度很快，但在增删元素时效率较低，为了克服这种局限性，可以使用List接口的另一个实现类LinkedLis
- 下面的代码将发生死循环：package com.zzj.concurrency;public class VolatileObjectTes
- menu部分xml代码<?xml version="1.0" encoding="utf-8"
- 目录为什么选择MQTTMQTT, 启动!使用方式Client模式创建工厂类创建工具类Spring Integration总结为什么选择MQT
- 本文实例为大家分享了Android GestureDetector实现手势滑动的具体代码，供大家参考，具体内容如下目标效果： 程
- 说到网络，相信大家都对TCP、UDP和HTTP协议这些都不是很陌生，学习这部分应该先对端口、Ip地址这些基础知识有一定了解，后面我们都是直接
- springboot jackson配置项目中使用的json是jackson。这个呢是spring boot自带的，一开始是用阿里的fast
- 本文实例讲述了Android中显示GIF动画的实现代码。分享给大家供大家参考，具体如下：gif图动画在android中还是比较常用的，比如像
- 前言 短时间提升自己最快的手段就是背面试题，最近总结了Java常用的面试题，分享给大家，希望大家都能圆梦大厂，加油，我命由我不由天
- android通过toast实现悬浮通知效果，如图：实现的功能： 自定义悬浮弹窗；点击其他地方该布局不受影响；可自定义显示时间；可
- 1、数组理论基础数组是存放在连续内存空间上的相同类型数据的集合，可以通过下标索引的方式获取到下标下对应的数据。举个栗子（字符数组）~可以看到
- 项目背景：在项目中包含两个定时任务，配置信息如下：1、@Scheduled(initialDelay = 1,fixedDelay=1000
- Android Spinner 组件Spinner: 下拉组件使用事项：布局在XML 中实现，具体的数据在JAVA 代码中实现；所用知识点：
- 这篇文章主要介绍了Spring Bean初始化及销毁多种实现方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值
- 本文实例通过Java的Zip输入输出流实现压缩和解压文件，前一部分代码实现获取文件路径，压缩文件名的更改等，具体如下：package com
- 第一次写技术博客，写一下以前写的一个双色球抽奖随机算法。原理如下：1首先初始化一个待抽奖的数组nums，数组的长度k2. 随机一个1-k之间
- 一个类，有时候搞不清楚到底用成员变量还是属性。 如： 成员变量 public string
- Java中字符串对象创建有两种形式，一种为字面量形式，如String str = "droid";，另一种就是使用new
