三级联动 省市 ajax的代码
Posted 池鱼i_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三级联动 省市 ajax的代码相关的知识，希望对你有一定的参考价值。
我只写到了市 剩下的区 可以复制粘贴 的 很简单
所需要的jar包有
代码如下
创建数据库
CREATE database provinces CHARACTER set utf8;
use provices;
CREATE table province (
pid INT PRIMARY KEY auto_increment,
pname varchar(20)
);
INSERT into province VALUES (null,"河南省");
INSERT into province VALUES (null,"海南省");
INSERT into province VALUES (null,"台湾省");
INSERT into province VALUES (null,"山东省");
INSERT into province 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,"菏泽曹县",4);
INSERT into city VALUES(null,"高雄市",3);
INSERT into city VALUES(null,"保定",5);
INSERT into city VALUES(null,"三亚市",2);
首先创建 City 和 Province 类 给getter setter tostring 以及 构造方法
Province类
package cn.hp.model;
public class Province
private int pid;
private String 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;
@Override
public String toString()
return "Province" +
"pid=" + pid +
", pname='" + pname + '\\'' +
'';
public Province(int pid, String pname)
this.pid = pid;
this.pname = pname;
public Province()
City类
package cn.hp.model;
public class City
private int cid;
private String cname;
private int pid;
public City()
public int getCid()
return cid;
@Override
public String toString()
return "City" +
"cid=" + cid +
", cname='" + cname + '\\'' +
", pid=" + pid +
'';
public void setCid(int cid)
this.cid = cid;
public String getCname()
return cname;
public City(String cname, int pid)
this.cname = cname;
this.pid = pid;
public void setCname(String cname)
this.cname = cname;
public int getPid()
return pid;
public void setPid(int pid)
this.pid = pid;
public City(int cid, String cname, int pid)
this.cid = cid;
this.cname = cname;
this.pid = pid;
连接数据库
package cn.hp.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class ConnDemo
private static String Driver ="com.mysql.jdbc.Driver";
private static String Url = "jdbc:mysql://localhost:3306/provinces?characterEncoding=utf8";
private static String user ="root";
private static String pwd ="123456";
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("���ӳɹ�");
创建 接口 ProvinceInfoDao
package cn.hp.dao;
import cn.hp.model.Province;
import java.util.List;
public interface ProvinceInfoDao
public List<Province> findAll();
实例化对象ProvinceInfoDaoImpl
package cn.hp.dao;
import cn.hp.model.Province;
import cn.hp.util.ConnDemo;
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 ProvinceInfoDaoImpl implements ProvinceInfoDao
@Override
public List<Province> findAll()
Connection conn= ConnDemo.getConn();
List<Province> list= new ArrayList<Province>();
String sql="select * from provice";
try
PreparedStatement ps= conn.prepareStatement(sql);
ResultSet rs= ps.executeQuery();
while (rs.next())
Province p= new Province();
p.setPid(rs.getInt(1));
p.setPname(rs.getString(2));
list.add(p);
catch (SQLException e)
e.printStackTrace();
return list;
以及CityInfoDao接口
package cn.hp.dao;
import cn.hp.model.City;
import java.util.List;
public interface CityInfoDao
public List<City>findAllCity(int pid);
CityInfoDaoImpl实例化对象
package cn.hp.dao;
import cn.hp.model.City;
import cn.hp.model.Province;
import cn.hp.util.ConnDemo;
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= ConnDemo.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;
写servlet FindProvinceServlet 以及FindCityPidServlet
FindProvinceServlet
package cn.hp.servlet;
import cn.hp.dao.ProvinceInfoDao;
import cn.hp.dao.ProvinceInfoDaoImpl;
import cn.hp.model.Province;
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("/findProvince")
public class FindProvinceServlet extends HttpServlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
ProvinceInfoDao pid=new ProvinceInfoDaoImpl();
List<Province> plist =pid.findAll();
response.getWriter().write(JSONObject.toJSONString(plist));
FindCityPidServlet
package cn.hp.servlet;
import cn.hp.dao.CityInfoDao;
import cn.hp.dao.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("/findCityByPid")
public class FindCityByPidServlet extends HttpServlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String id = request.getParameter("id");
CityInfoDao cid= new CityInfoDaoImpl();
List<City> clist = cid.findAllCity(Integer.parseInt(id));
response.getWriter().write(JSONObject.toJSONString(clist));
最后是jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script src="js/jquery-3.6.0.js"></script>
<title>$Title$</title>
<script>
$(function ()
$.ajax(
type:"get",
url:"findProvince",
dataType:"json",
success:function (data)
var obj= $("#province");
for (var i=0;i<data.length;i++)
// var ob= "<option value='+data[i].pid+"'>"+data[i].pname+"</option>"
var ob= "<option value='"+data[i].pid+"'>"+data[i].pname+"</option>"
obj.append(ob)
)
)
</script>
</head>
<body>
<select name="province" id="province">
<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>区
</body>
<script>
$("#province").change(function ()
$("#city option").remove();
$.ajax(
type:"get",
url:"findCityByPid?id="+$("#province").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>
</html>
有什么不足的可以指出 谢谢支持 ！
以上是关于三级联动 省市 ajax的代码的主要内容，如果未能解决你的问题，请参考以下文章