AJAX三级联动例题

package com.hanqi.model;

public class District {
	private String id;
	private String dname;
	private String parentid;
	public District(String id, String dname, String parentid) {
		super();
		this.id = id;
		this.dname = dname;
		this.parentid = parentid;
	}
	public District() {
		super();
		// TODO Auto-generated constructor stub
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getDname() {
		return dname;
	}
	public void setDname(String dname) {
		this.dname = dname;
	}
	public String getParentid() {
		return parentid;
	}
	public void setParentid(String parentid) {
		this.parentid = parentid;
	}
}

package com.hanqi.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;


public class DBHelper {
	private static final String USERNAME = "test0315";
	private static final String PASSWORD = "123456";
	private static final String URL = "jdbc:oracle:thin:@localhost:1521:xe";
	private static final String CLASSNAME = "oracle.jdbc.OracleDriver";
	static {
		try {
			Class.forName(CLASSNAME);
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	public static Connection getConnection() {
		Connection cOnn= null;
		try {
			cOnn= DriverManager.getConnection(URL, USERNAME, PASSWORD);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return conn;
	}

	public static void destroy(Connection conn,PreparedStatement ps,ResultSet rs) {
		if(rs != null) {
			try {
				rs.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			rs = null;
		}
		if(conn != null) {
			try {
				conn.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			cOnn= null;
		}
		if(ps != null) {
			try {
				ps.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			ps = null;
		}
	}
	public static void main(String[] args) {
		System.out.println(getConnection());
	}
}

package com.hanqi.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.security.auth.Destroyable;

import com.hanqi.model.District;
import com.hanqi.util.DBHelper;

public class Basedao {
	private Connection conn;
	private PreparedStatement ps;
	private ResultSet rs;

	private ResultSet initQuery(String sql, Object... objects) throws SQLException {
		cOnn= DBHelper.getConnection();
		ps = conn.prepareStatement(sql);
		setParam(ps, objects);
		return ps.executeQuery();
	}

	private void setParam(PreparedStatement ps, Object[] objects) throws SQLException {
		int i = 1;
		for (Object o : objects) {
			ps.setObject(i, o);
			i++;
		}
	}

	public List selectdistrict(String parentid) throws SQLException {
		List list = new ArrayList<>();
		String sql = "select * from c_district where parentid = ?";
		rs = initQuery(sql, parentid);
		while (rs.next()) {
			District dt = new District();
			dt.setId(rs.getString("id"));
			dt.setDname(rs.getString("dname"));
			dt.setParentid(rs.getString("parentid"));
			list.add(dt);
		}
		DBHelper.destroy(conn, ps, rs);
		return list;
	}
}

package com.hanqi.servlet;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSONObject;
import com.hanqi.dao.Basedao;
import com.hanqi.model.District;

/**
 * Servlet implementation class FindServlet
 */
@WebServlet("/FindServlet")
public class FindServlet extends HttpServlet {
	private static final long serialVersiOnUID= 1L;

	public FindServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String parentid = request.getParameter("parentid");
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset:utf-8");
		Basedao bd = new Basedao();
		JSONObject jo = new JSONObject();
		List list = null;
		try {
			list = bd.selectdistrict(parentid);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		if (list != null && list.size() > 0) {
			jo.put("success", true);
			jo.put("result", list);
		} else {
			jo.put("seccess", false);
		}
		response.getWriter().write(jo.toJSONString());
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

<%@ page language="java" cOntentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>









 省:
 	===请选择===
 
 市:
 	===请选择===
 
 区:
 	===请选择===
 

$(function() {//$() 此方法代表当JSP页面元素全部加载完成后再执行JS脚本
	$.ajax({//ajax方法调用，通过此方法接收前端信息发往后台并接受后台信息显示在前端
		type : "post",//发送请求的方式：post/get
		url : "FindServlet",//接收请求的地址
		dataType : "json",//接收后台数据的类型：text，html，json，xml
		data:{//这个ajax请求所携带的参数，是指前端的数据请求，以键值对方式存储，为可选项；
			parentid:"0"
		},
		success : function(data) {//当这个请求成功发送到后台时执行的方法，这里的data参数是指后台响应后发送来的字符串类型的数据；
			if (data.success) {//
				for (var i = 0; i "//将id作为选项的值
									+ district.dname + "");
				}
			}
		},
		error : function(msg) {//请求失败时执行的方法；

		}
	});
	$("#province").change(//当该选择器改变时执行该方法
			function() {//封装一个方法
				var provinceid = $(this).val();//获取该选项的值作为请求参数，this代表这个选择器；
				$.ajax({
					type : "post",
					url : "FindServlet",
					data : {
						parentid : provinceid
					},
					dataType : "json",
					success : function(data) {
						if (data.success) {
							$("#city").empty();//先将次级选项初始化，再添加下拉数据
							$("#city").append("==请选择==");
							$("#area").empty();
							$("#area").append("===请选择===");
							for (var i = 0; i "
												+ district.dname + "");
							}
						} else {//如果查询不到数据也要对选项初始化，即清空
							$("#city").empty();
							$("#city").append("==请选择==");
							$("#area").empty();
							$("#area").append("===请选择===");
						}
					},
					error : function() {

					}
				});
			});
	
	$("#city").change(
		function(){
			var cityid = $(this).val();
			$.ajax({
				type :"post",
				url:"FindServlet",
				data:{
					parentid:cityid
				},
				dataType:"json",
				success:function(data){
					if(data.success){
						$("#area").empty();
						$("#area").append("===请选择===");
						for(var i = 0;i"+district.dname+"")
						}
						
					}else{
						$("#area").empty();
						$("#area").append("===请选择===");
					}
				},
				error:function(msg){
					alert("查询错误！");
				}
			});
		}
	);

});

$(function() {
	getData("0", "#province");//调用方法，将参数传进去
	$("#province").change(function() {
		var provinceid = $(this).val();
		getData(provinceid, "#city");
	});
	$("#city").change(function() {
		var cityid = $(this).val();
		getData(cityid, "#area");
	});

})
var getData = function(parentid, selector) {//将方法命名
	$.ajax({
		type : "post",
		url : "FindServlet",
		data : {
			parentid : parentid
		},
		dataType : "json",
		success : function(data) {
			if (data.success) {
				$(selector).empty();
				$(selector).append("===请选择===");
				$(selector + "select").empty();//获取该选择器后面紧挨的选择器，并清空
				$(selector + "select").append("===请选择===");
				for (var i = 0; i "
									+ district.dname + "");
				};			
			}else{
				$(selector).empty();
				$(selector).append("===请选择===");
				$(selector + "select").empty();
				$(selector + "select").append("===请选择===");
			}		
			
		},
		error : function(msg) {
			alert("查询失败！")
		}
	});
}