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 blocke.printStackTrace();}}public static Connection getConnection() {Connection conn = null;try {conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);} catch (SQLException e) {// TODO Auto-generated catch blocke.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 blocke.printStackTrace();}rs = null;}if(conn != null) {try {conn.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}conn = null;}if(ps != null) {try {ps.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.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<District> selectdistrict(String parentid) throws SQLException {List<District> 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<District> 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 stubdoGet(request, response);}}

<%@ page language="java" contentType="text/html; charset=UTF-8" ???pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><script type="text/javascript" src="js/index.js"></script><title>Insert title here</title></head><body> 省:<select id="province"> <option>===请选择===</option> </select> 市:<select id="city"> <option>===请选择===</option> </select> 区:<select id="area"> <option>===请选择===</option> </select></body></html>

$(function() {//$() 此方法代表当JSP页面元素全部加载完成后再执行JS脚本$.ajax({//ajax方法调用，通过此方法接收前端信息发往后台并接受后台信息显示在前端type : "post",//发送请求的方式：post/geturl : "FindServlet",//接收请求的地址dataType : "json",//接收后台数据的类型：text，html，json，xmldata:{//这个ajax请求所携带的参数，是指前端的数据请求，以键值对方式存储，为可选项；parentid:"0"},success : function(data) {//当这个请求成功发送到后台时执行的方法，这里的data参数是指后台响应后发送来的字符串类型的数据；if (data.success) {//for (var i = 0; i < data.result.length; i++) {var district = data.result[i];//将数据里的对象遍历取出$("#province").append(//添加下拉选项"<option value=‘" + district.id + "‘>"//将id作为选项的值+ district.dname + "</option>");}}},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("<option>==请选择==</option>");$("#area").empty();$("#area").append("<option>===请选择===</option>");for (var i = 0; i < data.result.length; i++) {var district = data.result[i];$("#city").append("<option value=‘" + district.id + "‘>"+ district.dname + "</option>");}} else {//如果查询不到数据也要对选项初始化，即清空$("#city").empty();$("#city").append("<option>==请选择==</option>");$("#area").empty();$("#area").append("<option>===请选择===</option>");}},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("<option>===请选择===</option>");for(var i = 0;i<data.result.length;i++){var district = data.result[i];$("#area").append("<option value=‘"+ district.id+"‘ >"+district.dname+"</option>")}}else{$("#area").empty();$("#area").append("<option>===请选择===</option>");}},error:function(msg){alert("查询错误！");}});});});