javaScript+jsp+Servlet局部刷新页面

    1、script脚本
 //Ajax实现下拉框二级级联,根据第一个下拉框的值改变第二个下拉框内的列表   
   //根据 浏览器的类型,创建xmlHttpRequest对象   
   function createXmlHttpRequest()   
    {   
        if(window.ActiveXObject)   
        {   
            return new ActiveXObject("Microsoft.XMLHTTP");   
        }   
        else if( window.XMLHttpRequest())   
        {   
            return new XMLHttpRequest();   
        }       
    }   
    var xmlHttpRequest;   
     
    //异步响应函数,搜索专业    
    function searchMajor(para)   
    {   
        var url="majorSearch.action?para="+para;     //后台请求的路径    
        xmlHttpRequest=createXmlHttpRequest(); 
        xmlHttpRequest.onreadystatechange=callbackMajor;   //将回调函数注册给状态改变事件     
        xmlHttpRequest.open("GET",url,true);   
        xmlHttpRequest.send(null);     
    }
   
    //异步响应函数,搜索班级号 
    function searchClass(para)   
    {   
        var url="classSearch.action?para="+para;     //后台请求的路径    
        xmlHttpRequest=createXmlHttpRequest(); 
        xmlHttpRequest.onreadystatechange=callbackClass;   //将回调函数注册给状态改变事件     
        xmlHttpRequest.open("GET",url,true);   
        xmlHttpRequest.send(null);     
    }
   
    //回调函数,得到搜索班级号结果   
    function callbackClass()   
    {         
   var c_num=document.getElementById("c_num");   
         //请求被成功响应,已接收到结果   
         if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)   
         {                       
            var result=xmlHttpRequest.responseText;          //返回的结果字符串    
            var classArray= result.split(",");   //返回的结果字符串中,值之间是以,分隔的,所以先拆分成数组   
            var count = classArray.length;   
            c_num.length=0;   //先将下拉列表框清空   
            for (var i = 0; i <count; i++)    
            {      
                c_num.options.add(new Option(classArray[i+1], classArray[i]));   //将结果循环添加到下拉列表中
                i++;  
            }
            if(classArray[count-1] == ""){
             c_num.length=0;   //先将下拉列表框清空
             c_num.options.add(new Option("暂无班级分类",""));
            }      
              
         }   
         else  
         {   
             c_num.length=0;   
             c_num.options.add(new Option("暂无班级分类",""));   
         }   
           
    }
   
     //回调函数,得到搜索专业结果   
    function callbackMajor()   
    {         
   var major=document.getElementById("major");   
         //请求被成功响应,已接收到结果   
         if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)   
         {                       
             var result=xmlHttpRequest.responseText;          //返回的结果字符串    
            var majorArray= result.split(",");   //返回的结果字符串中,值之间是以,分隔的,所以先拆分成数组   
            var count = majorArray.length;    
            major.length=0;   //先将下拉列表框清空   
            for (var i = 0; i <count; i++)    
            {      
                major.options.add(new Option(majorArray[i+1], majorArray[i]));   //将结果循环添加到下拉列表中
                i++;  
            }
            if(majorArray[count-1] == ""){
             major.length=0;   //先将下拉列表框清空
             major.options.add(new Option("暂无专业分类",""));
            }    
              
         }   
         else  
         {   
             major.length=0;   
             major.options.add(new Option("暂无专业分类",""));   
         }   
           
    }          
      
 //下拉框改变事件 1  
 function changeMajorOptions()   
 {   
     var academy = document.getElementById("academy");        
     if(academy.value != "")   
     {   
      searchMajor(academy.value);      
     }       
    return;      
 }
 //下拉框改变事件 2
 function changeClassOptions(){
  var major = document.getElementById("major").value;
  if(major != ""){
   searchClass(major);
  }
 }
2、 jsp页面
<td height="30" align="right">院系班级:</td>
    <td>
     <select name="academy" id="academy" οnblur="changeMajorOptions()">
      <c:if test="${empty alist}">
       <option value="">暂无注册班级</option>
      </c:if>
      <c:if test="${!empty alist}">
       <c:forEach items="${alist}" var="academy">
        <option value="${academy.m_id}">${academy.m_name}</option>
       </c:forEach>
      </c:if>
     </select>&nbsp;
     <select name="major" id="major" οnblur="changeClassOptions()">
      <option value="">请选择专业</option>
     </select>&nbsp;
     <select name="c_num" id="c_num">
      <option value="">请选择班级</option>
     </select>
    </td>
3、MajorListAction类实现(ClassListAction同理)
  response.setContentType("text/html");
  response.setCharacterEncoding("utf-8");
  int para = Integer.parseInt(request.getParameter("para"));
  IUserIndexBusiness iuib = BusinessIndexFactory.getUserIndexBusiness();
  List<MajorValue> mlist = iuib.getMajorList(para);
  String result = "";
  if(mlist!=null&&mlist.size()>0){
   result = ""+mlist.get(0).getM_id();
   result += ","+mlist.get(0).getM_name();
   for(int i=1;i<mlist.size();i++){
    result += ","+mlist.get(i).getM_id();
    result += ","+mlist.get(i).getM_name();
   }
  }
  response.getWriter().write(result);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值