首页 > 代码库 > Ajax调用后台action返回JSONArray(JSONObject)类型实现jsp中下拉列表的动态显示
Ajax调用后台action返回JSONArray(JSONObject)类型实现jsp中下拉列表的动态显示
一、描述
现在有个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=http://www.mamicode.com/css/styles.css">>
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=http://www.mamicode.com/"0">--班级列表--';>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对象返回一条数据,并进行显示。
Ajax调用后台action返回JSONArray(JSONObject)类型实现jsp中下拉列表的动态显示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。