<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.2.js"></script>
<title>Insert title here</title>
</head>
<body style="font-size: 12px">
<select id="province">
<option value="">请选择</option>
</select>
<select id="city">
<option value="">请选择</option>
</select>
<select id="county">
<option value="">请选择</option>
</select><br/>
详细地址：<input type="text"/>
<script type="text/javascript">
$().ready(function(){
//文档加载完毕后，异步请求所有的省份
$.post("${pageContext.request.contextPath}/servlet/ControllerServlet?operation=showAllProvince&time="+new Date().getTime(),null,function(data,textStatus){
//返回的数据时JSON字符串
var provinces = eval("("+data+")");
//id=province增加<option value="1">山东省</option>
for(var i=0;i<provinces.length;i++){
var id = provinces[i].id;
var name = provinces[i].name;
var $optionElement = $("<option value='"+id+"'>"+name+"</option>");
$("#province").append($optionElement);
}
});
//省份值变化时，引起城市的变化
$("#province").change(function(){
//清空城市
$("#city option[value!='']").remove();
$("#county option[value!='']").remove();
$.post("${pageContext.request.contextPath}/servlet/ControllerServlet?operation=showCityByProvince&time="+new Date().getTime(),{pid:$(this).val()},function(data,textStatus){
var citys = eval("("+data+")");
for(var i=0;i<citys.length;i++){
var id = citys[i].id;
var name = citys[i].name;
var $optionElement = $("<option value='"+id+"'>"+name+"</option>");
$("#city").append($optionElement);
}
});
});
//城市值变化时，引起区县的变化
$("#city").change(function(){
//清空区县
$("#county option[value!='']").remove();
$.post("${pageContext.request.contextPath}/servlet/ControllerServlet?operation=showCountyByCity&time="+new Date().getTime(),{cid:$(this).val()},function(data,textStatus){
var countys = eval("("+data+")");
for(var i=0;i<countys.length;i++){
var id = countys[i].id;
var name = countys[i].name;
var $optionElement = $("<option value='"+id+"'>"+name+"</option>");
$("#county").append($optionElement);
}
});
});
});
</script>
</body>
</html>
public class ControllerServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private BusinessService s = new BusinessServiceImpl();
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
String operation = request.getParameter("operation");
if("showAllProvince".equals(operation)){
showAllProvince(request,response);
}
if("showCityByProvince".equals(operation)){
showCityByProvince(request,response);
}
if("showCountyByCity".equals(operation)){
showCountyByCity(request,response);
}
}
//根据城市的id罗列区县
private void showCountyByCity(HttpServletRequest request,
HttpServletResponse response)throws ServletException, IOException {
String cid = request.getParameter("cid");
if(cid!=null&&!cid.equals("")){
List<County> cs = s.findCountyByCityId(Integer.parseInt(cid));
JSONArray jsonArray = JSONArray.fromObject(cs);
PrintWriter out = response.getWriter();
out.write(jsonArray.toString());
}
}
//根据省份的id罗列城市
private void showCityByProvince(HttpServletRequest request,
HttpServletResponse response)throws ServletException, IOException {
String pid = request.getParameter("pid");
if(pid!=null&&!pid.equals("")){
List<City> cs = s.findCityByProvinceId(Integer.parseInt(pid));
JSONArray jsonArray = JSONArray.fromObject(cs);
PrintWriter out = response.getWriter();
out.write(jsonArray.toString());
}
}
//显示所有的省份
private void showAllProvince(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
List<Province> ps = s.findAllProvince();
JSONArray jsonArray = JSONArray.fromObject(ps);
PrintWriter out = response.getWriter();
out.write(jsonArray.toString());
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
