本文实例为大家分享了ajax实现省市县三级联动的具体代码,供大家参考,具体内容如下
首先建立数据库,如下所示

接口
省
import java.util.list;
public interface provincedao {
list<province> findall();
}
市
import java.util.list;
public interface citydao {
list<city> findcitybypid(int pid);
}
县
import java.util.list;
public interface areadao {
list<area> findareabycid(int cid);
}
接口实现类
省
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 provincedaoimpl implements provincedao{
public list<province> findall(){
connection conn = dbhelper.getconn();
arraylist<province> provinces = new arraylist<province>();
string sql = "select * from aprovince";
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));
provinces.add(p);
}
} catch (sqlexception e) {
e.printstacktrace();
}
return provinces;
}
}
市
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 citydaoimpl implements citydao {
@override
public list<city> findcitybypid(int pid) {
connection conn = dbhelper.getconn();
arraylist<city> cities = new arraylist<>();
string sql = "select * from acity where pid=?";
try {
preparedstatement ps = conn.preparestatement(sql);
ps.setint(1,pid);
resultset rs = ps.executequery();
while (rs.next()){
city city = new city();
city.setpid(rs.getint(3));
city.setcid(rs.getint(1));
city.setcname(rs.getstring(2));
cities.add(city);
}
} catch (sqlexception e) {
e.printstacktrace();
}
return cities;
}
}
县
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 areadaoimpl implements areadao {
@override
public list<area> findareabycid(int cid) {
connection conn = dbhelper.getconn();
arraylist<area> areas = new arraylist<>();
string sql = "select * from aarea where cid=?";
try {
preparedstatement ps = conn.preparestatement(sql);
ps.setint(1,cid);
resultset rs = ps.executequery();
while (rs.next()){
area area = new area();
area.setcid(rs.getint(3));
area.setaid(rs.getint(1));
area.setaname(rs.getstring(2));
areas.add(area);
}
} catch (sqlexception e) {
e.printstacktrace();
}
return areas;
}
}
servlet
省
package cn.zhc.servlet;
import cn.zhc.dao.impl.provincedaoimpl;
import cn.zhc.dao.provincedao;
import cn.zhc.domin.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("/findall")
public class findall extends httpservlet {
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
response.setcontenttype("text/html;charset=utf-8");
provincedao provincedao = new provincedaoimpl();
list<province> lists=provincedao.findall();
response.getwriter().write(jsonobject.tojsonstring(lists));
}
protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
this.dopost(request, response);
}
}
市
package cn.zhc.servlet;
import cn.zhc.dao.citydao;
import cn.zhc.dao.impl.citydaoimpl;
import cn.zhc.domin.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 findcitybypid extends httpservlet {
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
response.setcontenttype("text/html;charset=utf-8");
string pid = request.getparameter("pid");
citydao citydao = new citydaoimpl();
list<city> citylist = citydao.findcitybypid(integer.parseint(pid));
response.getwriter().write(jsonobject.tojsonstring(citylist));
}
protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
this.dopost(request, response);
}
}
县
package cn.zhc.servlet;
import cn.zhc.dao.areadao;
import cn.zhc.dao.impl.areadaoimpl;
import cn.zhc.domin.area;
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("/findareabycid")
public class findareabycid extends httpservlet {
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
response.setcontenttype("text/html;charset=utf-8");
string cid = request.getparameter("cid");
areadao areadao = new areadaoimpl();
list<area> areas = areadao.findareabycid(integer.parseint(cid));
response.getwriter().write(jsonobject.tojsonstring(areas));
}
protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
this.dopost(request, response);
}
}
jsp页面
<%@ page contenttype="text/html;charset=utf-8" language="java" %>
<html>
<head>
<title>三级联动</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$.ajax({
type:"get",
url:"findall",
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>";
obj.append(ob);
}
}
})
$("#province").change(function () {
$("#city option").remove();
$.ajax({
type:"get",
async:false,
url:"findcitybypid?pid="+$("#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);
}
}
})
});
$("#city,#province").change(function () {
$("#area option").remove();
$.ajax({
type:"get",
async:false,
url:"findareabycid?cid="+$("#city").val(),
datatype:"json",
success:function (data) {
var obj=$("#area");
for(var i=0;i<data.length;i++){
var ob="<option value='"+data[i].aid+"'>"+data[i].aname+"</option>";
obj.append(ob);
}
}
})
});
});
</script>
<select name="province" id="province">
<option value="0">请选择</option>
</select>省
<select name="city" id="city">
<option value="0">请选择</option>
</select>市
<select name="area" id="area">
<option value="0">请选择</option>
</select>县
</body>
</html>
实现结果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持代码网。
发表评论