Ajax调用后台action返回JSONArray（JSONObject）类型实现jsp中下拉列表的动态显示
浏览数：33 /
时间：2015年06月09日
一、描述
现在有个jsp页面上有一个所属学校和一个所属班级的下拉列表，只有在选择所属学校后才弹出所属班级列表，所以采用Ajax技术返回一个ArrayList类型的键值对显示在所属班级列表中，效果如图1所示：
二、源代码
1、main.jsp主要源代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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">
<link rel="stylesheet" type="text/css" href="../../../../css/styles.css">
<title>Excel批量创建用户</title>
<script type="text/javascript" src="boardCollect.js"></script>
</head>
<body>
<table class="tab_frm" width="90%">
<tr>
<td class="left">
请选择要创建用户的角色：
</td>
<td class="right">
<s:radio name="roleId" list="#{'16':'教师','28':'学生','18':'家长'}" value="'16'"></s:radio>
</td>
</tr>
<tr>
<td class="left">
请选所属学校：
</td>
<td class="right">
<!-- 加入学校、班级、学科、年级-->
<select name="schoolCircle" id="schoolCircle" onchange="showClass()">
<option value="0">
-学校列表-
</option>
<c:forEach items="${vul.schoolList}" var="school">
<option value="${school.CIRCLE_ID}">
${school.CIRCLE_NAME}
</option>
</c:forEach>
</select>
</td>
</tr>
<tr >
<td class="left">
请选择所属班级：
</td>
<td id="classCircleTD" class="right">
<select name="classCircle" id="classCircle" disabled>
<option value="0">
-班级列表-
</option>
</select>
</td>
</tr>
<tr>
<td class="left">
请选择文件(EXCEL)：
</td>
<td class="right">
<s:file id="excel" name="excel"></s:file>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<s:submit value="上传文件" cssClass="btn_long"></s:submit>
<input type="button" value="Excel模板下载" class="btn_long"
onclick="document.downloadTableInfo.submit();" />
</td>
</tr>
</table>
</body>
</html>2、jsp引入的在相同目录下调用Ajax的boardCollect.js源代码
// 创建请求
var http_request;
function createXMLHttpRequest(){
http_request=false;
if(window.XMLHttpRequest){
http_request=new XMLHttpRequest(); //初始化http_request
if(http_request.overrideMimeType){
http_request.overrideMimeType("text/html");
}
}else if(window.ActiveXObject){
try{
http_request=new ActiveXObject("Msxml2.XMLHTTP"); //在IE中创建XMLHttpRequest对象,新版IE
}catch(e){
try{
http_request=new ActiveXObject("Microsoft.XMLHTTP"); //在IE中创建XMLHttpRequest对象旧版IE
}catch(e){}
}
}
if(!http_request){
window.alert("不能创建XMLHttpRequest对象实例");
return false;
}
}
// 显示班级列表
var comlist;
function showClass(){ //点击“所属学校”显示该学校下的所有班级列表
//window.alert("showClass");
var school = document.getElementById("schoolCircle").value;
//alert(school);
if (school == 0) {
var htmlList = '<select name="classCircle" id="classCircle" >'
+ '<option value="0">--班级列表--</option>';
document.getElementById("classCircle").innerHTML = htmlList;
} else {
showOptions("findClassList1.action?school=" + school);
}
//showComments("/modules/forum/frontForum/forumAll/boardCollect.action?mcpForumBoard.boardId="+id);
}
function showOptions(url){
createXMLHttpRequest();
//window.alert(url);
// 指定处理函数 事件解发器！！！
http_request.onreadystatechange=processRequest;
http_request.open("GET",url,true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest(){
//window.alert(http_request.readyState);
if(http_request.readyState==4){
//window.alert(http_request.status);
if(http_request.status==200){
var classList = eval('('+http_request.responseText+')');
//var classList = com.classList;
//alert(classList.length);
var htmlList = '<select name="classCircle" id="classCircle" >';
htmlList += '<option value="0">--班级列表--</option>';
for ( var i = 0; i < classList.length; i++) {
var circle = classList[i];
//alert(circle["CIRCLE_ID"]);
htmlList += '<option value="'+circle["CIRCLE_ID"]+'">'
+ circle["CIRCLE_NAME"] + '</option>';
}
document.getElementById("classCircleTD").innerHTML = htmlList;
}
}
}3、boardCollect.js中的Ajax调用后台的action处理类源代码
// 查找所选学校的所有班级
public List<Map> findClassList1() {
HttpServletResponse response;
response=ServletActionContext.getResponse();
response.setContentType( "text/json;charset=utf-8");
response.setHeader( "Cache-Control", "no-cache");
response.setHeader( "Pargma", "no-cache");
PrintWriter out;
try {
out = response.getWriter();
JSONArray returnArticles = new JSONArray();
if (school == null || school.length() == 0) {
return null;
} else {
String sql = "select CIRCLE_ID ,CIRCLE_NAME from dersp_circle,dersp_school_class_relation "
+ "where class_id=circle_id and school_id=" + school;
System.out.println("sql:"+sql);
List<Map> list = jdbcTemplate.queryForList(sql);
for( int i = 0; i < list.size(); i++){
JSONObject js = new JSONObject();
try {
js.put("CIRCLE_ID", list.get(i).get("CIRCLE_ID"));
js.put("CIRCLE_NAME", list.get(i).get("CIRCLE_NAME"));
returnArticles.put(js);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
out.write(returnArticles.toString());
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}三、总结
1、jsp页面的一个onchange或者onclick事件调用js中的一个方法，该方法使用Ajax技术动态调用数据库中的数据，并且异步写回一个JSONArray，根据select中的option属性显示出取回的数据；
2、如果调用Ajax后想返回一个Map类型的数组（多条数据）就需要使用JSONArray类型，将每个Map构造成一个JSONObject类型并添加到JSONArray数组中异步写回jsp页面；
3、如何你从action中只想返回一个Map类型的键值对（如取得count（*）记录数），可以只使用JSONObject对象返回一条数据，并进行显示。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
