<%@ 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(); %> <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 == ) //判断是否完成
{
if(hx.status == ) //判断服务器是否完成，正常
{
// alert(hx.responseText);
//刷新二级地区
var rt = hx.responseText;
// 以;为分隔符分割 返回的是一个数组
var array = rt.split(";");
//获取元素 erj 的id并赋值给 erj
var erj = document.getElementById("erj");
//清空erj对应的下拉列表
erj.options.length = ;
//遍历数组
for(var i = ; i < array.length - ;i++)
{
// alert(array[i]);
//将数组中的冒号分割的赋值给array1
var array1 = array[i].split(":"); erj.options.add(new Option(array1[],array1[])); //不是很明白 ？？
} var sanj = document.getElementById("sanj"); sanj.options.length = ; }
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 = ; //for 循环遍历数组
for(var i = ; 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 = ;
});
} 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 +"\nStatus: " +status); //处理数据 var array = data.split(";"); // 分隔 返回的是一个数组 var sanj = document.getElementById("sanj"); sanj.options.length = ; for(var i = ; i < array.length - ;i++)
{
// alert(array[i]); var array1 = array[i].split(":"); sanj.options.add(new Option(array1[],array1[]));
} }); } </script> </head>
<body> 一级地区:
<select id="yij" name="yij" onchange="yijChangeJson()"> <option value="">未选择</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="">未选择</option> </select>
三级地区： <select id="sanj" name="sanj" onchange="sanjChange()"> <option value="">未选择</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);
} }