Struts2.2配置json+ajax实现三级联（任意级联）下拉列表框 [转]

前言：在网上找了一些相关资料，选择了一个方式应用到自己的SSH框架中，遇到了很多困难（主要是后台没写好），折腾了两天终于实现了ajax的局部刷新功能，万法归一，像登录校验，刷新table等功能都可以用这种方式，多了不说上代码。

1.action类：

[java] view plaincopyprint?
 
  1. private String id="";  
  2. private String schoolId;  
  3. private String name="";  
  4. private String classId;  
  5. private String code=null;  
  6.    private GangedService gangedService;  
  7.      
  8. public GangedService getGangedService() {  
  9.     return gangedService;  
  10. }  
  11. public void setGangedService(GangedService gangedService) {  
  12.     this.gangedService = gangedService;  
  13. }  
  14. public String queryAllSchool() throws Exception{  
  15.     //List schoolList = new CascadeMenuDAO().findAllSchool();  
  16.     List<School> schoolList = this.gangedService.findAllSchool();  
  17.     // 写入到被前台页面接收的字符串，id和name以_隔开 以"school"结尾  
  18.     for (int i = 0; i < schoolList.size(); i++) {  
  19.         School school = (School) schoolList.get(i);  
  20.         id += school.getId() + "_";  
  21.         name += school.getName() + "_";  
  22.     }  
  23.     code = id + "|" + name + "|school";  
  24.     //System.out.println(code);  
  25.     return ActionSupport.SUCCESS;  
  26.     //return SUCCESS;  
  27. }  
  28. public String queryAllClass() throws Exception{  
  29.     id="";name="";  
  30.     int sId = Integer.parseInt(schoolId);// 把从前台传来的参数转换成int类型的  
  31.     //List schoolList = new CascadeMenuDAO().findClassbySchoolid(sId); // 写入到被前台页面接收的字符串，id和name以_隔开  
  32.     List<Class1> classList = this.gangedService.findClassBySchoolId(sId);// 以"class"结尾  
  33.     System.out.println("hah");  
  34.     for (int i = 0; i < classList.size(); i++) {  
  35.         Class1 class1 = (Class1) classList.get(i);  
  36.         id += class1.getId() + "_";  
  37.         name += class1.getName() + "_";  
  38.     }  
  39.     code = id + "|" + name + "|class";  
  40.     System.out.println(code);  
  41.     return ActionSupport.SUCCESS;  
  42.     //return SUCCESS;  
  43. }  
  44.   
  45. public String queryAllStudent() {  
  46.     id="";name="";  
  47.     int cId = Integer.parseInt(classId);  
  48.   
  49.     //List schoolList = new CascadeMenuDAO().findStubyclassId(cId); // 写入到被前台页面接收的字符串，id和name以_隔开  
  50.     List<Student> studentList = this.gangedService.findStudentByclass(cId);                                                               // 以"student"结尾  
  51.     for (int i = 0; i < studentList.size(); i++) {  
  52.         Student student = (Student) studentList.get(i);  
  53.         id += student.getId() + "_";  
  54.         name += student.getName() + "_";  
  55.     }  
  56.     code = id + "|" + name + "|student";  
  57.     //return ActionSupport.SUCCESS;  
  58.     return SUCCESS;  
  59. }  
  60.   
  61. public String getId() {  
  62.     return id;  
  63. }  
  64.   
  65. public void setId(String id) {  
  66.     this.id = id;  
  67. }  
  68.   
  69. public String getSchoolId() {  
  70.     return schoolId;  
  71. }  
  72.   
  73. public void setSchoolId(String schoolId) {  
  74.     this.schoolId = schoolId;  
  75. }  
  76.   
  77. public String getName() {  
  78.     return name;  
  79. }  
  80.   
  81. public void setName(String name) {  
  82.     this.name = name;  
  83. }  
  84.   
  85. public String getClassId() {  
  86.     return classId;  
  87. }  
  88.   
  89. public void setClassId(String classId) {  
  90.     this.classId = classId;  
  91. }  
  92.   
  93. @JSON(name="code")  
  94. public String getCode() {  
  95.     return code;  
  96. }  
  97.   
  98. public void setCode(String code) {  
  99.     this.code = code;  
  100. }  

dao层：

[java] view plaincopyprint?
 
  1. public List<School> findAllSchool() {  
  2.         // TODO Auto-generated method stub  
  3.     HibernateTemplate ht = this.getHibernateTemplate();  
  4.     String hql = "from School s order by s.id asc";  
  5.     ///from User u order by u.id asc  
  6.     @SuppressWarnings("unchecked")  
  7.     List<School> schoollist = ht.find(hql);  
  8.     for(School school1:schoollist){    
  9.         school1.getName();  
  10.     }   
  11.         return schoollist;  
  12.     }  
  13.   
  14.     @Override  
  15.     public List<Class1> findClassBySchoolId(int schoolId) {  
  16.         // TODO Auto-generated method stub  
  17.         HibernateTemplate ht = this.getHibernateTemplate();  
  18.         String hql = "from Class1 where school_id = '"+schoolId+"'";  
  19.         @SuppressWarnings("unchecked")  
  20.         List<Class1> classlist = ht.find(hql);   
  21.         return classlist;  
  22.     }  
  23.   
  24.     @Override  
  25.     public List<Student> findStudentByclass(int classId) {  
  26.         // TODO Auto-generated method stub  
  27.         HibernateTemplate ht = this.getHibernateTemplate();  
  28.         String hql = "from Student where class_id='"+classId+"'";  
  29.         @SuppressWarnings("unchecked")  
  30.         List<Student> studentlist = ht.find(hql);  
  31.         return studentlist;  
  32.     }  

Struts.xml配置：

[java] view plaincopyprint?
 
  1. <package name="ganged" extends="json-default">    
  2.     <action name="allSchool" class="GangedAction" method="queryAllSchool">   
  3.         <result name="success" type="json">  
  4.             <param name="root">code</param>   
  5.         </result>    
  6.     </action>    
  7.     <action name="allClass" class="GangedAction" method="queryAllClass">    
  8.         <result name="success" type="json">  
  9.             <param name="root">code</param>  
  10.         </result>    
  11.     </action>    
  12.     <action name="allStu" class="GangedAction" method="queryAllStudent">    
  13.         <result name="success" type="json">  
  14.             <param name="root">code</param>  
  15.         </result>    
  16.     </action>    
  17. </package>    


前台ganged.jsp：

[html] view plaincopyprint?
 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <%@ taglib prefix="s" uri="/struts-tags" %>  
  4. <%    
  5. String path = request.getContextPath();    
  6. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";    
  7. %>   
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  9. <html>  
  10. <head>  
  11. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  12. <base href="<%=basePath%>">  
  13. <title></title>  
  14.   
  15. <script type="text/javascript">  
  16.     //创建XMLHttpRequest对象     
  17.     function createXMLHttpRequest() {  
  18.         if (window.XMLHttpRequest)  
  19.           {// code for all new browsers  
  20.             XMLHttpReq=new XMLHttpRequest();  
  21.             //return XMLHttpReq;  
  22.           }  
  23.         else if (window.ActiveXObject)  
  24.           {// code for IE5 and IE6  
  25.             XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");  
  26.             //return XMLHttpReq;  
  27.           }  
  28.         else  
  29.           {  
  30.           alert("Your browser does not support XMLHttpReq.");  
  31.           }  
  32.           
  33.     }  
  34.     //发送请求  
  35.     function sendRequest(url, params, method) {  
  36.         if (method) {  
  37.             if (method.toLowerCase("post")) {  
  38.                 alert("post方法");  
  39.                 sendRequestPost(url, params);  
  40.             } else {  
  41.                 if (method.toLowerCase("get")) {  
  42.                     sendRequestGet(url + "?" + params);  
  43.                 } else {  
  44.                     //  
  45.                 }  
  46.             }  
  47.         } else {  
  48.             alert("\u63d0\u4ea4\u65b9\u5f0f\u4e0d\u80fd\u4e3a\u7a7a\uff01");  
  49.         }  
  50.     }  
  51.     //post发送请求函数  
  52.     function sendRequestPost(url, params) {  
  53.         createXMLHttpRequest();  
  54.         XMLHttpReq.open("POST", url, true);  
  55.         XMLHttpReq.onreadystatechange = processResponse;//指定响应函数  
  56.         XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");  
  57.         //XMLHttpReq.setRequestHeader("context-type","text/xml;charset=utf-8");  
  58.         XMLHttpReq.send(params); // 发送请求  
  59.     }  
  60.     //get发送请求函数  
  61.     function sendRequestGet(url) {  
  62.         createXMLHttpRequest();  
  63.         XMLHttpReq.open("GET", url, true);  
  64.         XMLHttpReq.onreadystatechange = processResponse;//指定响应函数  
  65.         XMLHttpReq.send(null); // 发送请求  
  66.     }  
  67.     //post发送请求函数(无需传递参数时)  
  68.     function sendRequestPostwihtnoArgs(url)   
  69.     {  
  70.         createXMLHttpRequest();  
  71.         //var XMLHttpReq = createXMLHttpRequest();  
  72.         //var XMLHttpReq=new XMLHttpRequest();  
  73.         XMLHttpReq.onreadystatechange = processResponse;//指定回调函数  
  74.         XMLHttpReq.open("POST", url, true);  
  75.         //XMLHttpReq.open("GET", url, true);  
  76.         XMLHttpReq.send(null); // 发送请求  
  77.     }  
  78.     // 更新列表框  
  79.     function update() {   
  80.         //alert("---XMLHttpReq.responseText--"+XMLHttpReq.responseText);  
  81.         //alert("---NMB1--");  
  82.         var res = eval('('+XMLHttpReq.responseText+')');  
  83.         //var a= "1_2_|一中_二中_|school";  
  84.         var option = null;  
  85.         //var id_name_code = res.code.split("|");//拆分字符串，得到id与name(包括后缀字符串)的组合值  
  86.         //var id_name_code = a.split("|");//拆分字符串，得到id与name(包括后缀字符串)的组合值  
  87.         var id_name_code = res.split("|");//拆分字符串，得到id与name(包括后缀字符串)的组合值  
  88.         //alert("---NMB2--");  
  89.         var id_result = id_name_code[0];//得到id的组合值(所有的id,以_隔开)  
  90.         var name_result = id_name_code[1];//得到name的组合值(所有的name,以_隔开)  
  91.         var result = id_name_code[2]; //得到后缀名字符串  
  92.         //拆分以_隔开的字符串  
  93.         var id = id_result.split("_");  
  94.         var name = name_result.split("_");  
  95.         //window.alert("---"+id_result);  
  96.         if ("student" == result) {  
  97.             clearStudent();  
  98.             var studentId = document.getElementById("studentId");  
  99.             for ( var i = 0; i < id.length; i++) {  
  100.                 option = new Option(name[i], id[i]);  
  101.                 studentId.options.add(option);  
  102.             }  
  103.         }  
  104.         if ("class" == result) {  
  105.             alert("成功调用class");  
  106.             clearClass();  
  107.             var classesId = document.getElementById("classId");  
  108.             for ( var i = 0; i < id.length; i++) {  
  109.                 option = new Option(name[i], id[i]);  
  110.                 classesId.options.add(option);  
  111.             }  
  112.         }  
  113.         if ("school" == result) {  
  114.             //alert("---NMB3--");  
  115.             clearSchool();  
  116.             var schoolId = document.getElementById("schoolId");  
  117.             for ( var i = 0; i < id.length; i++) {  
  118.                 option = new Option(name[i], id[i]);  
  119.                 schoolId.options.add(option);  
  120.             }  
  121.         }  
  122.     }  
  123.     // 清除列表框  
  124.     function clearSchool() {  
  125.         var schoolId = document.getElementById("schoolId");  
  126.         while (schoolId.childNodes.length > 0) {  
  127.             schoolId.removeChild(schoolId.childNodes[0]);  
  128.         }  
  129.     }  
  130.     function clearClass() {  
  131.         var classesId = document.getElementById("classId");  
  132.         while (classesId.childNodes.length > 0) {  
  133.             classesId.removeChild(classesId.childNodes[0]);  
  134.         }  
  135.     }  
  136.     function clearStudent() {  
  137.         var studentId = document.getElementById("studentId");  
  138.         while (studentId.childNodes.length > 0) {  
  139.             studentId.removeChild(studentId.childNodes[0]);  
  140.         }  
  141.     }  
  142.     // 处理返回信息函数  
  143.     function processResponse() {  
  144.         //alert("--readyState---"+XMLHttpReq.readyState);  
  145.         //var XMLHttpReq=new XMLHttpRequest();  
  146.         if (XMLHttpReq.readyState == 4) { // 判断对象状态  
  147.         alert("--status---"+XMLHttpReq.status);  
  148.             if (XMLHttpReq.status == 200) { //信息已经成功返回，开始处理信息  
  149.                 //alert("成功了！！！");  
  150.                 update();  
  151.             } else { //页面不正常  
  152.                 window.alert("未找到页面");  
  153.             }  
  154.         }  
  155.     }  
  156.     function findStubyClasslId() {  
  157.         var classId = document.frmMenu.classId.value;  
  158.         var sURL = "allStu";  
  159.         var method = "post";  
  160.         var sParams = "classId=" + classId;  
  161.         sendRequest(sURL, sParams, method);  
  162.   
  163.     }  
  164.     function findClassbySchoolId() {  
  165.         var schoolId = document.frmMenu.schoolId.value;  
  166.         var sURL = "allClass";  
  167.         var method = "POST";  
  168.         var sParams = "schoolId=" + schoolId;  
  169.         sendRequest(sURL, sParams, method);   
  170.     }  
  171.   
  172.     function findAllSchool() {  
  173.         var sURL = "allSchool";  
  174.         sendRequestPostwihtnoArgs(sURL);  
  175.     }  
  176. </script>  
  177.   
  178.   
  179. </head>  
  180. <body onload="findAllSchool()">  
  181.         <form name="frmMenu">  
  182.             <br>  
  183.             <hr>  
  184.             <div align="center">  
  185.                 信息查询  
  186.                 <br>  
  187.                 <br>  
  188.                 <!--select name="schoolId" id="schoolId" onblur="findClassbySchoolId()"-->  
  189.                 <select name="schoolId" id="schoolId" onchange="findClassbySchoolId()">  
  190.                     <option selected value="">  
  191.                     请选择学校  
  192.                     </option>  
  193.   
  194.                 </select>  
  195.   
  196.                 <!--select name="classId" id="classId" onblur="findStubyClasslId()"-->  
  197.                 <select name="classId" id="classId" onchange="findStubyClasslId()">  
  198.                     <option selected value="">  
  199.                         请选择班级  
  200.                     </option>  
  201.                 </select>  
  202.                 <select name="studentId" id="studentId">  
  203.                     <option selected value="">  
  204.                         请选择学生  
  205.                     </option>  
  206.                 </select>  
  207.             </div>  
  208.   
  209.         </form>  
  210.     </body>  
  211. </html>  



表结构：

 

 

 

 

显示结果：

 

二.ajax里xmlHttp.open()方法post与get的区别  

2010-05-13 11:58:40|  分类： 默认分类 |  标签： |举报 |字号大中小 订阅

 
 

　　POST：用"POST"方式发送数据,可以大到4MB,在接收页面使用Request.Form["..."]获取
　　GET：用"GET"方式发送数据,只能256KB,在接收页面使用Request.QueryString["..."]获取

///////////////////////////////////////////////////////////////////////////////////////////////////////////

　　一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。
例如 ：
　　 var url = "login.jsp?user=XXX&pwd=XXX";
　　xmlHttp.open("GET",url,true);
　　xmlHttp.send(null);
　　此外，也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。
　　例如：
　　xmlHttp.open("POST","login.jsp",true);
　　xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
　　xmlHttp.send("user="+username+"&pwd="+password);
　　需要注意的是根据提交方式的不同，两种提交方式分别调用后台的doGet方法和doPost方法。

posted on 2014-11-22 12:34  小光zfg  阅读(254)  评论(0)    收藏  举报
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3