<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.*" %> <%@ page import="com.hanqi.*" %> <%@ page import="com.hanqi.dao.*" %> <!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"> <title>无刷新三级联动</title> <script src="js/jquery-2.1.4.min.js"></script> <% //实例化 并获取数据 MembersDAL md = new MembersDAL(); //获取一级的数据 ArrayList<Members> al = md.getList(0); %> <script type="text/javascript"> var hx = false; function yijChange() { //所有浏览器通用实例化代码 if(window.XMLHttpRequest) //非IE IE7版本及以上 都支持非ie形式 { hx = new XMLHttpRequest(); //如果是非IE浏览器 那么就会实例化 // alert("qqq"); //如果是实例化成功上方的，那么就会输出这句话 } else if(window.ActiveXObject) //IE { try{ hx = new ActiveXObject("Msxml2.XMLHTTP"); //实例化 // alert("qqq2"); //如果实例化成功上方的 那么就会输出这句话 } catch(e) { alert(e); try { hx = new ActiveXObject("Microsoft.XMLHTTP"); //实例化 // alert("qqq3"); //如果实例化成功上方的 那么就会输出这句话 } catch(e) { alert(e); } } } //测试创建XMLHttpRequest是否成功 if(!hx) { // alert("创建XMLHttpRequest失败"); } else { // alert("创建XMLHttpRequest成功"); } var yij = document.getElementById("yij"); // 1 设置异步请求的url等信息 &nocache = " + new Date().getTime() 通过不断变化的时间用来进行去缓存操作 hx.open("GET","ajaxTest?parentid=" + yij.value + "&nocache = " + new Date().getTime() , true); //（"请求类型 GET/POST",URL,是否异步 true/false） // 2 设置回调函数 事件处理器 hx.onreadystatechange = setErj; // hx.onreadystatechange = getResult; //将回调函数的函数名作为一个事件处理器给 hx.onreadystatechange //调用请求的发送 hx.send(null); //在需要请求传送参数时设置异步请求时用 post 方式 } function setErj() //定义一个函数 { if(hx.readyState == 4) //判断是否完成 { if(hx.status == 200) //判断服务器是否完成，正常 { // alert(hx.responseText); //刷新二级地区 var rt = hx.responseText; // 以;为分隔符分割 返回的是一个数组 var array = rt.split(";"); //获取元素 erj 的id并赋值给 erj var erj = document.getElementById("erj"); //清空erj对应的下拉列表 erj.options.length = 1; //遍历数组 for(var i = 0 ; i < array.length - 1 ;i++) { // alert(array[i]); //将数组中的冒号分割的赋值给array1 var array1 = array[i].split(":"); erj.options.add(new Option(array1[1],array1[0])); //不是很明白 ？？ } var sanj = document.getElementById("sanj"); sanj.options.length = 1; } else { alert("错误状态码 = " + hx.status + "状态文本信息 = " + hx.statusText); } } } function yijChangeJson() { $.get("JsonMembers?parentid="+ $("#yij").val()+ "&nocache = " + new Date().getTime(),function(data,status){ // alert(data); //解析JSON var array = eval("(" + data + ")"); var erj = document.getElementById("erj"); erj.options.length = 1; //for 循环遍历数组 for(var i = 0; i < array.length;i++) { erj.options.add(new Option(array[i].name, array[i].id)); } //获取 sanj 元素id 并赋值 var sanj = document.getElementById("sanj"); sanj.options.length = 1; }); } function erjChange() { // alert($("#erj").val()); // $("#erj").val() 获取id为erj的被选择值 // $("#erj"); //获取元素 var url = "ajaxTest?parentid=" + $("#erj").val() + "&nocache = " + new Date().getTime(); $.get(url,function(data,status){ // alert("Date:" + data +" Status: " +status); //处理数据 var array = data.split(";"); // 分隔 返回的是一个数组 var sanj = document.getElementById("sanj"); sanj.options.length = 1; for(var i = 0 ; i < array.length - 1 ;i++) { // alert(array[i]); var array1 = array[i].split(":"); sanj.options.add(new Option(array1[1],array1[0])); } }); } </script> </head> <body> 一级地区: <select id="yij" name="yij" onchange="yijChangeJson()"> <option value="0">未选择</option> <% if(al != null) { for(Members m : al) { out.print("<option value='" + m.getId()+ "'>" + m.getName() + "</option>"); // " + (m.getId() == iYij ? "selected" : "" ) + " //是否选中 } } %> </select> 二级地区： <select id="erj" name="erj" onchange="erjChange()"> <option value="0">未选择</option> </select> 三级地区： <select id="sanj" name="sanj" onchange="sanjChange()"> <option value="0">未选择</option> </select> </body> </html>
package com.hanqi; import java.io.IOException; 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 java.sql.*; import com.hanqi.dao.*; import java.util.*; /** * Servlet implementation class ajaxMembers */ @WebServlet("/ajaxTest") public class ajaxTest extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public ajaxTest() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); response.setCharacterEncoding("UTF-8"); String rtn = ""; String pid = request.getParameter("parentid"); if (pid == null || pid.trim().length() == 0 ) { pid = "-1"; } int iPid = Integer.parseInt(pid); MembersDAL md = new MembersDAL(); ArrayList<Members> al; try { al = md.getList(iPid); if (al != null) { for (Members u : al) { rtn += u.getId() + ":" + u.getName() + ";"; } } } catch (Exception e) { e.printStackTrace(); } response.getWriter().print(rtn); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }