<%@ 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 +"\nStatus: " +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);
}
}
