java省市县三级联动
项目笔记
本文需要先导入jquery包，否则ajax无法使用
大家在开发的过程中都往往会用到省市县三级联动，本文记录了一个html+ajax+mysql的三级联动，话不多说，直接上代码
html页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>省市县</title>
<style>
.box {
margin-left:20px;
margin-top: 20px;
width: 300px;
height: 200px;
border: 1px dashed black;
}
h2 {
text-align: center;
}
span {
font-size:20px;
width: 66px;
height: 30px;
margin-left: 20px;
display: inline-block;
}
select {
width: 100px;
height: 30px;
font-size:16px;
}
.sub {
margin-left: 200px;
margin-top: 5px;
width: 70px;
height: 30px;
font-size:20px;
line-height: 20px;
background-color: rgb(49, 159, 229);
color: white;
border-radius: 3px;
border: none;
}
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<div class='box'>
<h2>省市县/区三级联动</h2>
<form id="pcc" action="action.php" method="POST">
<span>省 :</span>
<select id="pro" name="pro">
</select><br/>
<span>市 :</span>
<select id="city" name="city">
</select><br/>
<span>县/区:</span>
<select id="county" name="county">
</select><br/>
<input class="sub" type="submit" value="提交" >
</form>
</div>
<script>
$(function(){
$.ajax({
type:"POST",
cache:false,
url:"LiandongServlet",
data:{"method":"provinceQuery",
"parentid":0},
dataType:"json",
success:function(data){
var option='<option>--请选择--</option>';
$.each(data,function(i,n){
option += '<option value="'+n.base_areaid+'">'+n.name+'</option>';
})
$("#pro").append(option);
}
});
$("#pro").change(function(){
var pid=$(this).val();
$.ajax({
type:"POST",
cache:false,
url:"LiandongServlet",
data:{"method":"provinceCity",
"parentid":pid},
dataType:"json",
success:function(data){
//追加本级option前，先清除city和county的option，以免重选时干扰
$("#city option").remove();
$("#county option").remove();
var option='<option>--请选择--</option>';
$.each(data,function(i,n){
option += '<option value="'+n.base_areaid+'">'+n.name+'</option>';
})
$("#city").append(option);
}
});
});
$("#city").change(function(){
var pid=$(this).val();
$.ajax({
type:"POST",
cache:false,
url:"LiandongServlet",
data:{"method":"provinceCounty",
"parentid":pid},
dataType:"json",
success:function(data){
//同上
$("#county option").remove();
var option='<option>--请选择--</option>';
$.each(data,function(i,n){
option += '<option value="'+n.base_areaid+'">'+n.name+'</option>';
})
$("#county").append(option);
}
});
});
})
</script>
</body>
</html>
servlet代码，因为是早期写的项目，所以用的原生的，你也可以直接用框架的，只需要注意返回的是json格式的就行
主要用于将数据库转化成json数据，传回前端
if ("provinceQuery".equals(method)) {// 查询省
try {
String sql = "SELECT area.base_areaid,area.name FROM base_area area where 1=1 and area.parentid='0'";
JSONArray listDept = dao.findJSONArray(sql);
System.out.println(listDept);
out.write(listDept.toJSONString());
out.flush();
out.close();
} catch (SQLException e) {
e.printStackTrace();
}
} else if("provinceCity".equals(method)) {//查询市
try {
String sql = "SELECT area.base_areaid,area.name FROM base_area area where 1=1 and area.parentid=?";
JSONArray listDept = dao.findJSONArray(sql,bas.getParentid());
System.out.println(listDept);
out.write(listDept.toJSONString());
out.flush();
out.close();
} catch (SQLException e) {
e.printStackTrace();
}
}else if("provinceCounty".equals(method)) {//查询县/区
try {
String sql = "SELECT area.base_areaid,area.name FROM base_area area where 1=1 and area.parentid=?";
JSONArray listDept = dao.findJSONArray(sql,bas.getParentid());
System.out.println(listDept);
out.write(listDept.toJSONString());
out.flush();
out.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
数据库base_area）
`**由于字数实在太多，所以发布不了不了，可以直接找一个三级联动的数据库，或者下载我发布的资源。。。
下面是数据库的表结构，可以参考
-- ----------------------------
-- Table structure for base_area
-- ----------------------------
DROP TABLE IF EXISTS `base_area`;
CREATE TABLE `base_area` (
`base_areaid` int(8) unsigned NOT NULL AUTO_INCREMENT COMMENT '地址ID',
`name` varchar(50) CHARACTER SET gbk NOT NULL DEFAULT '' COMMENT '地区名字',
`parentid` int(8) unsigned NOT NULL DEFAULT '0' COMMENT '上级路径ID',
`vieworder` int(5) unsigned NOT NULL DEFAULT '0' COMMENT '顺序',
PRIMARY KEY (`base_areaid`),
KEY `idx_name` (`name`),
KEY `idx_parentid_vieworder` (`parentid`,`vieworder`)
) ENGINE=InnoDB AUTO_INCREMENT=820792 DEFAULT CHARSET=utf8 COMMENT='统一地区库';
版权声明：本文为qq_36402131原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。