ajax学习4--实现三级联动demo

功能需求：

页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框
选择省，则市下拉框中出现对应的该省下的市信息，选择市，则区/县下拉框中
出现对应的该市下面的区/县信息

技术分析:

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>

重视基础，才能走的更远。