功能需求：
页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框
选择省，则市下拉框中出现对应的该省下的市信息，选择市，则区/县下拉框中
出现对应的该市下面的区/县信息
技术分析:
ajax技术+jsp+servlet+jdbc
需求分析(思路):
1、创建页面：页面中有三个下拉框，分别为省、市、区/县
2、页面加载成功发起ajax请求，请求省的信息，并将响应结果
填充到省下拉框中
3、选择省触发一个新的js函数 的执行，该函数中发起新的ajax请求
请求该省下的市信息，并将响应数据填充到市下拉框
4、选择市信息触发一个新的js函数的执行，该函数中发起新的ajax请求
请求该市下的区/县信息，并将数据填充到区/县下拉框中
数据库设计：
创建表(area)：存储了省、市、区/县信息
地区id:areaid
地区名:areaname
地区上级id：parentid
sql语句设计:
查询所有的省信息:
select * from area where parentid=0;
查询选择的省的市信息(假如：选择的山东省的areaid为110000,)
select * from area where parentid=110000;
查询选择的市的区/县信息(假如：选择的山东省的济南市areaid为110001)
select * from area where parentid =110001;
代码中
select * from area where parentid=?;
代码实现:
pojo层：
略
dao层:
略
service层：
略
controller层：
public class AreaServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
AreaService as = new AreaServiceImpl();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setHeader("Content-Type", "text/html;charset=utf-8");
String pid = req.getParameter("parentid");
List<Area> list = as.getAreaInfoService(pid);
resp.getWriter().write(new Gson().toJson(list));
}
}
前端jsp页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div select{
200px;
height: 30px
}
</style>
<!--引入jQuery文件 -->
<script type="text/javascript" src="js/j.js"></script>
<script type="text/javascript">
$(function(){
/* $.get("area",{parentid:0},function(data){
eval("var area = " + data);
$("#pre").empty();
for (var i = 0; i < area.length; i++) {
$("#pre").append("<option value='"+area[i].areaid+"'>"+area[i].areaname+"</option>");
}
$("#pre").trigger("change");
}); */
getData(0,"pre");
$("#pre").change(function(){
var areaid = $("#pre").val();
getData(areaid, "city");
/* $.get("area",{parentid:areaid},function(data){
eval("var area = " + data);
$("#city").empty();
for(var i=0; i<area.length; i++){
$("#city").append("<option value='"+area[i].areaid+"'>"+area[i].areaname+"</option>");
}
$("#city").trigger("change");
}); */
})
$("#city").change(function(){
var areaid = $("#city").val();
getData(areaid, "town");
/* $.get("area",{parentid:areaid},function(data){
eval("var area = " + data);
$("#town").empty();
for(var i=0; i<area.length; i++){
$("#town").append("<option value='"+area[i].areaid+"'>"+area[i].areaname+"</option>");
}
}); */
})
// 封装公共方法
function getData(parentid, sid){
$.get("area",{parentid:parentid},function(data){
eval("var area = " + data);
$("#"+sid).empty();
for (var i = 0; i < area.length; i++) {
$("#"+sid).append("<option value='"+area[i].areaid+"'>"+area[i].areaname+"</option>");
}
$("#"+sid).trigger("change");
})
}
})
</script>
</head>
<body style="background: gray">
<div style=" 750px; margin: auto;margin-top: 200px;">
省：<select name="" id="pre" ></select>
市：<select name="" id="city" ></select>
区县：<select name="" id="town" ></select>
</div>
</body>
</html>