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



Struts2+Json+JavaScript实现动态级联下拉列表框。上网找了下资料，参考着做了个

 

JSP页面，使用JSTL的标签。

 

  1. <tr>
  2. <td width=”10%”>所属栏目</td>
  3. <td width=”90%”><select name=”columnInfo” id=”columnInfo”>
  4. <option value=”0″>–请选择–</option>
  5. <c:forEach var=”columns” items=”${columnsList}”>
  6. <option value=”${columns.id}”>${columns.name}</option>
  7. </c:forEach>
  8. </select><select name=”subColumnInfo” id=”subColumnInfo”></select></td>
  9. </tr>

 

JS

 

[javascript] view plaincopy

  1. $(function(){
  2. $(“#columnInfo”).change(function(){
  3. $.getJSON(“NewsAction!ajax”,{parColumnId:$(this).val()},function(myJSON){
  4. var myOptions=”";
  5. for(var i=0;i<myJSON.length;i++){
  6. myOptions += ‘<option value=”‘ + myJSON[i].optionValue + ‘”>’ +
  7. myJSON[i].optionDisplay + ‘</option>’;
  8. }
  9. $(“#subColumnInfo”).empty();
  10. $(“#subColumnInfo”).html(myOptions);
  11. });
  12. });
  13. $(“#columnInfo”).change();
  14. })

 

后台处理

 

  1. // 处理AJAX级联请求
  2. public void ajax() throws Exception {
  3. String JSON_text = “”;
  4. if (parColumnId == 0) {
  5. JSON_text = “[{optionValue:'0',optionDisplay:'--请选择--'}]“;
  6. } else {
  7. List<Columns> subColumnList = columnService
  8. .findColumns(parColumnId);
  9. if (subColumnList.size() > 0) {
  10. JSON_text = “[";
  11. for (int i = 0; i < subColumnList.size(); i++) {
  12. Columns sub = subColumnList.get(i);
  13. JSON_text += "{optionValue:'" + sub.getId()
  14. + "',optionDisplay:'" + sub.getName() + "'}";
  15. if (i < subColumnList.size() - 1) {
  16. JSON_text += ", ";
  17. } else if (i == subColumnList.size() - 1) {
  18. JSON_text += "]“;
  19. }
  20. }
  21. }
  22. }
  23. PrintWriter out = null;
  24. try {
  25. ServletActionContext.getResponse().setCharacterEncoding(“UTF-8″);
  26. out = ServletActionContext.getResponse().getWriter();
  27. } catch (IOException ex) {
  28. ex.printStackTrace();
  29. }
  30. out.write(JSON_text);
  31. out.close();
  32. }

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

Js代码
  1. <span style=”white-space: normal; background-color: rgb(255, 255, 255);”><p>做了这么久了还没弄过动态级联下拉列表框，所以决定也整一个。</p>
  2. <p>例子为：学校、班级、学生，三级下拉列表框，具体代码随后贴出。</p>
  3. <p>得出的结论是Action设置get和set方法的属性，在前台页面中都可以通过eval解析为JSON对象，这就好办多了，我们可以用eval解析通过ajax读取的数据，然后直接使用就OK了。</p></span>


做了这么久了还没弄过动态级联下拉列表框，所以决定也整一个。

例子为：学校、班级、学生，三级下拉列表框，具体代码随后贴出。

得出的结论是Action设置get和set方法的属性，在前台页面中都可以通过eval解析为JSON对象，这就好办多了，我们可以用eval解析通过ajax读取的数据，然后直接使用就OK了。

Js代码
  1. <script type=”text/javascript”>
  2. //创建XMLHttpRequest对象
  3. function createXMLHttpRequest() {
  4. if (window.XMLHttpRequest) { //Mozilla 浏览器
  5. XMLHttpReq = new XMLHttpRequest();
  6. } else {
  7. if (window.ActiveXObject) { // IE浏览器
  8. try {
  9. XMLHttpReq = new ActiveXObject(“Msxml2.XMLHTTP”);
  10. } catch (e) {
  11. try {
  12. XMLHttpReq = new ActiveXObject(“Microsoft.XMLHTTP”);
  13. } catch (e) {
  14. }
  15. }
  16. }
  17. }
  18. }
  19. //发送请求
  20. function sendRequest(url, params, method) {
  21. if (method) {
  22. if (method.toLowerCase(“post”)) {
  23. sendRequestPost(url, params);
  24. } else {
  25. if (method.toLowerCase(“get”)) {
  26. sendRequestGet(url + “?” + params);
  27. } else {
  28. //
  29. }
  30. }
  31. } else {
  32. alert(“\u63d0\u4ea4\u65b9\u5f0f\u4e0d\u80fd\u4e3a\u7a7a\uff01″);
  33. }
  34. }
  35. //post发送请求函数
  36. function sendRequestPost(url, params) {
  37. createXMLHttpRequest();
  38. XMLHttpReq.open(“POST”, url, true);
  39. XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
  40. XMLHttpReq.setRequestHeader(“Content-Type”,
  41. “application/x-www-form-urlencoded; charset=UTF-8″);
  42. XMLHttpReq.send(params); // 发送请求
  43. }
  44. //get发送请求函数
  45. function sendRequestGet(url) {
  46. createXMLHttpRequest();
  47. XMLHttpReq.open(“GET”, url, true);
  48. XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
  49. XMLHttpReq.send(null); // 发送请求
  50. }
  51. //post发送请求函数(无需传递参数时)
  52. function sendRequestPostwihtnoArgs(url) {
  53. createXMLHttpRequest();
  54. XMLHttpReq.open(“POST”, url, true);
  55. XMLHttpReq.onreadystatechange = processResponse;//指定回调函数
  56. XMLHttpReq.send(null); // 发送请求
  57. }
  58. // 更新列表框
  59. function update() {
  60. var res = eval(‘(‘+XMLHttpReq.responseText+’)');
  61. var option = null;
  62. var id_name_code = res.code.split(“|”);//拆分字符串，得到id与name(包括后缀字符串)的组合值
  63. var id_result = id_name_code[0];//得到id的组合值(所有的id,以_隔开)
  64. var name_result = id_name_code[1];//得到name的组合值(所有的name,以_隔开)
  65. var result = id_name_code[2]; //得到后缀名字符串
  66. //拆分以_隔开的字符串
  67. var id = id_result.split(“_”);
  68. var name = name_result.split(“_”);
  69. if (“student” == result) {
  70. clearStudent();
  71. var studentId = document.getElementById(“studentId”);
  72. for ( var i = 0; i < id.length; i++) {
  73. option = new Option(name[i], id[i]);
  74. studentId.options.add(option);
  75. }
  76. }
  77. if (“class” == result) {
  78. clearClass();
  79. var classesId = document.getElementById(“classId”);
  80. for ( var i = 0; i < id.length; i++) {
  81. option = new Option(name[i], id[i]);
  82. classesId.options.add(option);
  83. }
  84. }
  85. if (“school” == result) {
  86. clearSchool();
  87. var schoolId = document.getElementById(“schoolId”);
  88. for ( var i = 0; i < id.length; i++) {
  89. option = new Option(name[i], id[i]);
  90. schoolId.options.add(option);
  91. }
  92. }
  93. }
  94. // 清除列表框
  95. function clearSchool() {
  96. var schoolId = document.getElementById(“schoolId”);
  97. while (schoolId.childNodes.length > 0) {
  98. schoolId.removeChild(schoolId.childNodes[0]);
  99. }
  100. }
  101. function clearClass() {
  102. var classesId = document.getElementById(“classId”);
  103. while (classesId.childNodes.length > 0) {
  104. classesId.removeChild(classesId.childNodes[0]);
  105. }
  106. }
  107. function clearStudent() {
  108. var studentId = document.getElementById(“studentId”);
  109. while (studentId.childNodes.length > 0) {
  110. studentId.removeChild(studentId.childNodes[0]);
  111. }
  112. }
  113. // 处理返回信息函数
  114. function processResponse() {
  115. if (XMLHttpReq.readyState == 4) { // 判断对象状态
  116. if (XMLHttpReq.status == 200) { //信息已经成功返回，开始处理信息
  117. update();
  118. } else { //页面不正常
  119. window.alert(“未找到页面”);
  120. }
  121. }
  122. }
  123. function findStubyClasslId() {
  124. var classId = document.frmMenu.classId.value;
  125. var sURL = “allStu”;
  126. var method = “post”;
  127. var sParams = “classId=” + classId;
  128. sendRequest(sURL, sParams, method);
  130. }
  131. function findClassbySchoolId() {
  132. var schoolId = document.frmMenu.schoolId.value;
  133. var sURL = “allClass”;
  134. var method = “post”;
  135. var sParams = “schoolId=” + schoolId;
  136. sendRequest(sURL, sParams, method);
  138. }
  140. function findAllSchool() {
  141. var sURL = “allSchool”;
  142. sendRequestPostwihtnoArgs(sURL);
  144. }
  145. </script>
<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>

 

Html代码
  1. <body onload=”findAllSchool()”>
  2. <form name=”frmMenu”>
  3. <br>
  4. <hr>
  5. <div align=”center”>
  6. 信息查询
  7. <br>
  8. <br>
  9. <select name=”schoolId” id=”schoolId”
  10. onblur=”findClassbySchoolId()”>
  11. <option selected value=”">
  12. 请选择学校
  13. </option>
  15. </select>
  17. <select name=”classId” id=”classId” onblur=”findStubyClasslId()”>
  18. <option selected value=”">
  19. 请选择班级
  20. </option>
  22. </select>
  24. <select name=”studentId” id=”studentId”>
  25. <option selected value=”">
  26. 请选择学生
  27. </option>
  28. </select>
  29. </div>
  31. </form>
  32. </body>
<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″ ?>

Struts2.xml代码
  1. <!DOCTYPE struts PUBLIC
  2. “-//Apache Software Foundation//DTD Struts Configuration 2.0//EN”
  3. “http://struts.apache.org/dtds/struts-2.0.dtd”>
  5. <struts>
  7. <constant name=”struts.enable.DynamicMethodInvocation” value=”false” />
  8. <constant name=”struts.devMode” value=”false” />
  9. <package name=”default1″ namespace=”/” extends=”json-default”>
  10. <action name=”allSchool” method=”queryAllSchool”>
  11. <result name=”success” type=”json” />
  12. </action>
  13. <action name=”allClass” method=”queryAllClass”>
  14. <result name=”success” type=”json”/>
  15. </action>
  16. <action name=”allStu” method=”queryAllStudent”>
  17. <result name=”success” type=”json”/>
  18. </action>
  19. </package>
  21. </struts>
<!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" method="queryAllSchool">
			<result name="success" type="json" />
		</action>
		   <action name="allClass" method="queryAllClass">
        	<result name="success" type="json"/>
        </action>
        <action name="allStu" method="queryAllStudent">
        	<result name="success" type="json"/>
        </action>
	</package>

</struts>

package ajax.demo.action;

Java代码
  1. import java.util.List;
  3. import net.sf.json.JSONObject;
  5. import org.apache.struts2.json.annotations.JSON;
  8. import ajax.demo.dao.CascadeMenuDAO;
  9. import ajax.demo.model.Menu;
  11. import com.opensymphony.xwork2.ActionSupport;
  13. public class CasecadingMenuAction extends ActionSupport {
  14. /**
  15. *
  16. */
  17. private static final long serialVersionUID = 1L;
  18. private String id=”";
  19. private String schoolId;
  20. private String name=”";
  21. private String classId;
  22. private String code;
  24. public String queryAllSchool() {
  25. List schoolList = new CascadeMenuDAO().findAllSchool();
  26. // 写入到被前台页面接收的字符串，id和name以_隔开 以”school”结尾
  27. for (int i = 0; i < schoolList.size(); i++) {
  28. Menu menu = (Menu) schoolList.get(i);
  29. id += menu.getId() + “_”;
  30. name += menu.getName() + “_”;
  31. }
  32. code = id + “|” + name + “|school”;
  33. return ActionSupport.SUCCESS;
  34. }
  35. public String queryAllClass() {
  36. int sId = Integer.parseInt(schoolId);// 把从前台传来的参数转换成int类型的
  37. List schoolList = new CascadeMenuDAO().findClassbySchoolid(sId); // 写入到被前台页面接收的字符串，id和name以_隔开
  38. // 以”class”结尾
  39. for (int i = 0; i < schoolList.size(); i++) {
  40. Menu menu = (Menu) schoolList.get(i);
  41. id += menu.getId() + “_”;
  42. name += menu.getName() + “_”;
  43. }
  44. code = id + “|” + name + “|class”;
  45. return ActionSupport.SUCCESS;
  46. }
  48. public String queryAllStudent() {
  50. int cId = Integer.parseInt(classId);
  52. List schoolList = new CascadeMenuDAO().findStubyclassId(cId); // 写入到被前台页面接收的字符串，id和name以_隔开
  53. // 以”student”结尾
  54. for (int i = 0; i < schoolList.size(); i++) {
  55. Menu menu = (Menu) schoolList.get(i);
  56. id += menu.getId() + “_”;
  57. name += menu.getName() + “_”;
  58. }
  59. code = id + “|” + name + “|student”;
  60. return ActionSupport.SUCCESS;
  61. }
  63. public String getId() {
  64. return id;
  65. }
  67. public void setId(String id) {
  68. this.id = id;
  69. }
  71. public String getSchoolId() {
  72. return schoolId;
  73. }
  75. public void setSchoolId(String schoolId) {
  76. this.schoolId = schoolId;
  77. }
  79. public String getName() {
  80. return name;
  81. }
  83. public void setName(String name) {
  84. this.name = name;
  85. }
  87. public String getClassId() {
  88. return classId;
  89. }
  91. public void setClassId(String classId) {
  92. this.classId = classId;
  93. }
  95. @JSON(name=”code”)
  96. public String getCode() {
  97. return code;
  98. }
  100. public void setCode(String code) {
  101. this.code = code;
  102. }
  104. }
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;
	}

}