servlet代碼
public class Demo1Servlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String pid = request.getParameter("pid");
ProvinceServiceImpl provinceServiceImpl = new ProvinceServiceImpl();
List<CityInfo> areas = provinceServiceImpl.getProvince(pid);
JSONSerializer jsonSerializer = new JSONSerializer();
String json = jsonSerializer.serialize(areas);
System.out.println(json);
response.setContentType("application/json;charset=utf-8");
response.getWriter().print(json);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
jquery解析
<script type="text/javascript">
$(function(){
loadArea(0,"s1");
$("#s1").change(function(){
$("#s2").empty();
$("#s2").append("<option value=''>--請選擇市--</option>");
$("#s3").empty();
$("#s3").append("<option value=''>--請選擇區縣--</option>");
var code1 = $(this).val();
loadArea(code1,"s2");
});
$("#s2").change(function(){
$("#s3").empty();
$("#s3").append("<option value=''>--請選擇區縣--</option>");
var code1 = $(this).val();
loadArea(code1,"s3");
});
});
function loadArea(pid, sid) {
$.post("${pageContext.request.contextPath }/demo1",{"pid":pid},function(data){
$(data).each(function(){
var cityname = this.cityName;
var codeid = this.codeid;
var $option = $("<option value='" + codeid + "'>" + cityname + "</option>");
$("#" + sid).append($option);
});
});
}
</script>
</head>
<body>
<select id="s1">
<option value="">--請選擇省--</option>
</select>
<select id="s2">
<option value="">--請選擇市--</option>
</select>
<select id="s3">
<option value="">--請選擇區縣--</option>
</select>
</body>
