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

来源：互联网发布：淘宝宝贝怎么下架编辑：程序博客网时间：2024/06/18 12:45

一、描述

现在有个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_requestif(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 blocke.printStackTrace();}            }}out.write(returnArticles.toString());         out.close(); } catch (IOException e) {// TODO Auto-generated catch blocke.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对象返回一条数据，并进行显示。

1 2