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" onblur="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" onblur="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);
本文出自 “未來不是夢” 博客

You May Also Like