Struts2+Json+JavaScript实现动态级联下拉列表框

做了这么久了还没弄过动态级联下拉列表框，所以决定也整一个。
例子为：学校、班级、学生，三级下拉列表框，具体代码随后贴出。
得出的结论是Action设置get和set方法的属性，在前台页面中都可以通过eval解析为JSON对象，这就好办多了，我们可以用eval解析通过ajax读取的数据，然后直接使用就OK了。

<script type="text/javascript">
	//创建XMLHttpRequest对象   
	function createXMLHttpRequest() {
		if (window.XMLHttpRequest) { //Mozilla 浏览器
			XMLHttpReq = new XMLHttpRequest();
		} else {
			if (window.ActiveXObject) { // IE浏览器			
				try {
					XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					try {
						XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
					} catch (e) {
					}
				}
			}
		}
	}
	//发送请求
	function sendRequest(url, params, method) {
		if (method) {
			if (method.toLowerCase("post")) {
				sendRequestPost(url, params);
			} else {
				if (method.toLowerCase("get")) {
					sendRequestGet(url + "?" + params);
				} else {
					//
				}
			}
		} else {
			alert("\u63d0\u4ea4\u65b9\u5f0f\u4e0d\u80fd\u4e3a\u7a7a\uff01");
		}
	}
	//post发送请求函数
	function sendRequestPost(url, params) {
		createXMLHttpRequest();
		XMLHttpReq.open("POST", url, true);
		XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
		XMLHttpReq.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded; charset=UTF-8");
		XMLHttpReq.send(params); // 发送请求
	}
	//get发送请求函数
	function sendRequestGet(url) {
		createXMLHttpRequest();
		XMLHttpReq.open("GET", url, true);
		XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
		XMLHttpReq.send(null); // 发送请求
	}
	//post发送请求函数(无需传递参数时)
	function sendRequestPostwihtnoArgs(url) {
		createXMLHttpRequest();
		XMLHttpReq.open("POST", url, true);
		XMLHttpReq.onreadystatechange = processResponse;//指定回调函数
		XMLHttpReq.send(null); // 发送请求
	}
	// 更新列表框
	function update() { 
		var res = eval('('+XMLHttpReq.responseText+')');
		var option = null;
		var id_name_code = res.code.split("|");//拆分字符串，得到id与name(包括后缀字符串)的组合值
		var id_result = id_name_code[0];//得到id的组合值(所有的id,以_隔开)
		var name_result = id_name_code[1];//得到name的组合值(所有的name,以_隔开)
		var result = id_name_code[2]; //得到后缀名字符串
		//拆分以_隔开的字符串
		var id = id_result.split("_");
		var name = name_result.split("_");
		if ("student" == result) {
			clearStudent();
			var studentId = document.getElementById("studentId");
			for ( var i = 0; i < id.length; i++) {
				option = new Option(name[i], id[i]);
				studentId.options.add(option);
			}
		}
		if ("class" == result) {
			clearClass();
			var classesId = document.getElementById("classId");
			for ( var i = 0; i < id.length; i++) {
				option = new Option(name[i], id[i]);
				classesId.options.add(option);
			}
		}
		if ("school" == result) {
			clearSchool();
			var schoolId = document.getElementById("schoolId");
			for ( var i = 0; i < id.length; i++) {
				option = new Option(name[i], id[i]);
				schoolId.options.add(option);
			}
		}
	}
	// 清除列表框
	function clearSchool() {
		var schoolId = document.getElementById("schoolId");
		while (schoolId.childNodes.length > 0) {
			schoolId.removeChild(schoolId.childNodes[0]);
		}
	}
	function clearClass() {
		var classesId = document.getElementById("classId");
		while (classesId.childNodes.length > 0) {
			classesId.removeChild(classesId.childNodes[0]);
		}
	}
	function clearStudent() {
		var studentId = document.getElementById("studentId");
		while (studentId.childNodes.length > 0) {
			studentId.removeChild(studentId.childNodes[0]);
		}
	}
	// 处理返回信息函数
	function processResponse() {
		if (XMLHttpReq.readyState == 4) { // 判断对象状态
			if (XMLHttpReq.status == 200) { //信息已经成功返回，开始处理信息
				update();
			} else { //页面不正常
				window.alert("未找到页面");
			}
		}
	}
	function findStubyClasslId() {
		var classId = document.frmMenu.classId.value;
		var sURL = "allStu";
		var method = "post";
		var sParams = "classId=" + classId;
		sendRequest(sURL, sParams, method);

	}
	function findClassbySchoolId() {
		var schoolId = document.frmMenu.schoolId.value;
		var sURL = "allClass";
		var method = "post";
		var sParams = "schoolId=" + schoolId;
		sendRequest(sURL, sParams, method);

	}

	function findAllSchool() {
		var sURL = "allSchool";
		sendRequestPostwihtnoArgs(sURL);

	}
</script>

 

<body onload="findAllSchool()">
		<form name="frmMenu">
			<br>
			<hr>
			<div align="center">
				信息查询
				<br>
				<br>
				<select name="schoolId" id="schoolId"
					 onblur="findClassbySchoolId()">
					<option selected value="">
					请选择学校
					</option>

				</select>

				<select name="classId" id="classId" onblur="findStubyClasslId()">
					<option selected value="">
						请选择班级
					</option>

				</select>

				<select name="studentId" id="studentId">
					<option selected value="">
						请选择学生
					</option>
				</select>
			</div>

		</form>
	</body>

 <?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

    <constant name="struts.enable.DynamicMethodInvocation" value="false" />
    <constant name="struts.devMode" value="false" />
	<package name="default1" namespace="/" extends="json-default">
		<action name="allSchool" class="ajax.demo.action.CasecadingMenuAction" method="queryAllSchool">
			<result name="success" type="json" />
		</action>
		   <action name="allClass" class="ajax.demo.action.CasecadingMenuAction" method="queryAllClass">
        	<result name="success" type="json"/>
        </action>
        <action name="allStu" class="ajax.demo.action.CasecadingMenuAction" method="queryAllStudent">
        	<result name="success" type="json"/>
        </action>
	</package>

</struts>

 package ajax.demo.action;

import java.util.List;

import net.sf.json.JSONObject;

import org.apache.struts2.json.annotations.JSON;


import ajax.demo.dao.CascadeMenuDAO;
import ajax.demo.model.Menu;

import com.opensymphony.xwork2.ActionSupport;

public class CasecadingMenuAction extends ActionSupport {
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private String id="";
	private String schoolId;
	private String name="";
	private String classId;
	private String code;

	public String queryAllSchool() {
		List schoolList = new CascadeMenuDAO().findAllSchool();
		// 写入到被前台页面接收的字符串，id和name以_隔开 以"school"结尾
		for (int i = 0; i < schoolList.size(); i++) {
			Menu menu = (Menu) schoolList.get(i);
			id += menu.getId() + "_";
			name += menu.getName() + "_";
		}
		code = id + "|" + name + "|school";
		return ActionSupport.SUCCESS;
	}
	public String queryAllClass() {
		int sId = Integer.parseInt(schoolId);// 把从前台传来的参数转换成int类型的
		List schoolList = new CascadeMenuDAO().findClassbySchoolid(sId); // 写入到被前台页面接收的字符串，id和name以_隔开
																			// 以"class"结尾
		for (int i = 0; i < schoolList.size(); i++) {
			Menu menu = (Menu) schoolList.get(i);
			id += menu.getId() + "_";
			name += menu.getName() + "_";
		}
		code = id + "|" + name + "|class";
		return ActionSupport.SUCCESS;
	}

	public String queryAllStudent() {

		int cId = Integer.parseInt(classId);

		List schoolList = new CascadeMenuDAO().findStubyclassId(cId); // 写入到被前台页面接收的字符串，id和name以_隔开
																		// 以"student"结尾
		for (int i = 0; i < schoolList.size(); i++) {
			Menu menu = (Menu) schoolList.get(i);
			id += menu.getId() + "_";
			name += menu.getName() + "_";
		}
		code = id + "|" + name + "|student";
		return ActionSupport.SUCCESS;
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getSchoolId() {
		return schoolId;
	}

	public void setSchoolId(String schoolId) {
		this.schoolId = schoolId;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getClassId() {
		return classId;
	}

	public void setClassId(String classId) {
		this.classId = classId;
	}

	@JSON(name="code")
	public String getCode() {
		return code;
	}

	public void setCode(String code) {
		this.code = code;
	}

}

 

评论

3 楼 ahhmdwg 2014-11-20  

    function sendRequestPostwihtnoArgs(url) {  
       createXMLHttpRequest();  
        XMLHttpReq.open("POST", url, true);  
        XMLHttpReq.onreadystatechange = processResponse;//指定回调函数  
        XMLHttpReq.send(null); // 发送请求  
    }  

用的是post方法为什么没有xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
并且还是无参数的send？

2 楼 cceasy 2014-05-16  

为什么我的struts不能识别json-default？？？
我的那几个包都导进去了啊。。。

woyaokuaile_1314 写道

我用这个例子，为什么调用到 processResponse 方法返回的是未找到页面呢？我用的IE8浏览器

楼上可遇到这种情况了。。

1 楼 woyaokuaile_1314 2014-04-04  

我用这个例子，为什么调用到 processResponse 方法返回的是未找到页面呢？我用的IE8浏览器