Ajax实现省市县三级联动

2023-07-04 15:16:06 85

本文实例为大家分享了Ajax实现省市县三级联动的具体代码，供大家参考，具体内容如下

首先建立数据库，如下所示

接口

省

importjava.util.List;
publicinterfaceProvinceDao{
ListfindAll();
}

市

importjava.util.List;
publicinterfaceCityDao{
ListfindCityByPid(intpid);
}

县

importjava.util.List;
publicinterfaceAreaDao{
ListfindAreaByCid(intcid);
}

接口实现类

省

importjava.sql.Connection;
importjava.sql.PreparedStatement;
importjava.sql.ResultSet;
importjava.sql.SQLException;
importjava.util.ArrayList;
importjava.util.List;

publicclassProvinceDaoImplimplementsProvinceDao{
publicListfindAll(){
Connectionconn=DBHelper.getConn();
ArrayListprovinces=newArrayList();
Stringsql="select*fromaprovince";
try{
PreparedStatementps=conn.prepareStatement(sql);
ResultSetrs=ps.executeQuery();
while(rs.next()){
Provincep=newProvince();
p.setPid(rs.getInt(1));
p.setPname(rs.getString(2));
provinces.add(p);
}
}catch(SQLExceptione){
e.printStackTrace();
}
returnprovinces;
}
}

市

importjava.sql.Connection;
importjava.sql.PreparedStatement;
importjava.sql.ResultSet;
importjava.sql.SQLException;
importjava.util.ArrayList;
importjava.util.List;

publicclassCityDaoImplimplementsCityDao{
@Override
publicListfindCityByPid(intpid){
Connectionconn=DBHelper.getConn();

ArrayListcities=newArrayList<>();

Stringsql="select*fromacitywherepid=?";

try{
PreparedStatementps=conn.prepareStatement(sql);
ps.setInt(1,pid);
ResultSetrs=ps.executeQuery();
while(rs.next()){
Citycity=newCity();
city.setPid(rs.getInt(3));
city.setCid(rs.getInt(1));
city.setCname(rs.getString(2));
cities.add(city);
}
}catch(SQLExceptione){
e.printStackTrace();
}
returncities;
}
}

县

importjava.sql.Connection;
importjava.sql.PreparedStatement;
importjava.sql.ResultSet;
importjava.sql.SQLException;
importjava.util.ArrayList;
importjava.util.List;

publicclassAreaDaoImplimplementsAreaDao{
@Override
publicListfindAreaByCid(intcid){
Connectionconn=DBHelper.getConn();
ArrayListareas=newArrayList<>();
Stringsql="select*fromaareawherecid=?";

try{
PreparedStatementps=conn.prepareStatement(sql);
ps.setInt(1,cid);
ResultSetrs=ps.executeQuery();
while(rs.next()){
Areaarea=newArea();
area.setCid(rs.getInt(3));
area.setAid(rs.getInt(1));
area.setAname(rs.getString(2));
areas.add(area);
}
}catch(SQLExceptione){
e.printStackTrace();
}
returnareas;
}
}

servlet

省

packagecn.zhc.servlet;

importcn.zhc.dao.Impl.ProvinceDaoImpl;
importcn.zhc.dao.ProvinceDao;
importcn.zhc.domin.Province;
importcom.alibaba.fastjson.JSONObject;

importjavax.servlet.ServletException;
importjavax.servlet.annotation.WebServlet;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjava.io.IOException;
importjava.util.List;

@WebServlet("/findAll")
publicclassFindAllextendsHttpServlet{
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");

ProvinceDaoprovinceDao=newProvinceDaoImpl();
Listlists=provinceDao.findAll();

response.getWriter().write(JSONObject.toJSONString(lists));
}
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
this.doPost(request,response);
}
}

市

packagecn.zhc.servlet;

importcn.zhc.dao.CityDao;
importcn.zhc.dao.Impl.CityDaoImpl;
importcn.zhc.domin.City;
importcom.alibaba.fastjson.JSONObject;

importjavax.servlet.ServletException;
importjavax.servlet.annotation.WebServlet;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjava.io.IOException;
importjava.util.List;

@WebServlet("/findCityByPid")
publicclassFindCityByPidextendsHttpServlet{
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");

Stringpid=request.getParameter("pid");

CityDaocityDao=newCityDaoImpl();
ListcityList=cityDao.findCityByPid(Integer.parseInt(pid));

response.getWriter().write(JSONObject.toJSONString(cityList));
}

protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
this.doPost(request,response);
}
}

县

packagecn.zhc.servlet;

importcn.zhc.dao.AreaDao;
importcn.zhc.dao.Impl.AreaDaoImpl;
importcn.zhc.domin.Area;
importcom.alibaba.fastjson.JSONObject;

importjavax.servlet.ServletException;
importjavax.servlet.annotation.WebServlet;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjava.io.IOException;
importjava.util.List;

@WebServlet("/findAreaByCid")
publicclassFindAreaByCidextendsHttpServlet{
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");

Stringcid=request.getParameter("cid");

AreaDaoareaDao=newAreaDaoImpl();
Listareas=areaDao.findAreaByCid(Integer.parseInt(cid));

response.getWriter().write(JSONObject.toJSONString(areas));
}

protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
this.doPost(request,response);
}
}

JSP页面

<%@pagecontentType="text/html;charset=UTF-8"language="java"%>


三级联动




$(function(){
$.ajax({
type:"get",
url:"findAll",
dataType:"json",
success:function(data){
varobj=$("#province");
for(vari=0;i"+data[i].pname+"";
obj.append(ob);
}
}
})

$("#province").change(function(){
$("#cityoption").remove();
$.ajax({
type:"get",
async:false,
url:"findCityByPid?pid="+$("#province").val(),
dataType:"json",
success:function(data){
varobj=$("#city");
for(vari=0;i"+data[i].cname+"";
obj.append(ob);
}
}
})
});

$("#city,#province").change(function(){
$("#areaoption").remove();
$.ajax({
type:"get",
async:false,
url:"findAreaByCid?cid="+$("#city").val(),
dataType:"json",
success:function(data){
varobj=$("#area");
for(vari=0;i"+data[i].aname+"";
obj.append(ob);
}
}
})
});
});


请选择
省

请选择
市

请选择
县

实现结果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Ajax实现省市县三级联动

热门推荐

随机推荐