Ajax调用后台action返回JSONArray（JSONObject）类型实现jsp中下拉列表的动态显示

最新推荐文章于 2022-12-03 14:38:07 发布

tongyuehong

最新推荐文章于 2022-12-03 14:38:07 发布

阅读量5k

点赞数 1

分类专栏： java 文章标签： jsp ajax JSONArray JSONObject 源代码

本文链接：https://blog.csdn.net/tongyuehong137/article/details/42360711

版权

java 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

一、描述

现在有个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" οnchange="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"
								οnclick="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对象返回一条数据，并进行显示。

tongyuehong

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Ajax调用后台action返回JSONArray（JSONObject）类型实现jsp中下拉列表的动态显示

1、jsp页面的一个onchange或者onclick事件调用js中的一个方法，该方法使用Ajax技术动态调用数据库中的数据，并且异步写回一个JSONArray，根据select中的option属性显示出取回的数据；2、如果调用Ajax后想返回一个Map类型的数组（多条数据）就需要使用JSONArray类型，将每个Map构造成一个JSONObject类型并添加到JSONArray数组中异步写回jsp页面；3、如何你从action中只想返回一个Map类型的键值对（如取得count（*）记录数），可以只使用
复制链接

扫一扫