与数据库交互的二级联动

与数据库交互的二级联动

ajax.js:

var  prjName = " /projectName/ " ;
var  ajaxObj;

function  createAjaxObject(){
     try { return   new  ActiveXObject( " Msxml2.XMLHTTP " );} catch (e){};
     try { return   new  ActiveXObject( " Microsoft.XMLHTTP " );} catch (e){};
     try { return   new  XMLHttpRequest();} catch (e){};
    alert( " XmlHttpRequest not supported! " );
     return   null ;
}

function  $(id){
      return  document.getElementById(id);
}

city.jsp核心代码:

< fieldset >< legend > 添加城市 </ legend >
                                 < table >
                                     < tr >
                                     < td >
                                             < select  name ="countries"  style ="width:95px"  onchange ="changeCountry(this)" >
                                                 <%     
                                                    
                                                    List < Country >  counties  =  (List < Country > )request.getAttribute( " countryLs " );
                                                    
                                                    out.print( " <option value='0'>----请选择----</option> " );
                                                     if (counties! = null  || counties.size() > 0 ){
                                                         for  ( int  i  =   0 ; i  <  counties.size(); i ++ ){
                                                            Country country  =  (Country)counties.get(i);
                                                             String  cid  =  country.getId();
                                                            out.print( " <option value= " +  cid  + " > " +  country.getCountry()  + " </option> " );
                                                        }
                                                    }
                                                    
                                                 %>
                                             </ select >
                                         </ td >
                                         < td  id ="provincesTd" >
                                             < select  name ="provinces"  style ="width:95px"  onchange ="changeCountry(this)" >
                                                 <%
                                                List < Province >  provinces  =  (List < Province > )request.getAttribute( " provinceLs " );
                                                    
                                                    out.print( " <option value='0'>----请选择----</option> " );
                                                     if (provinces! = null  || provinces.size() > 0 ){
                                                         for  ( int  i  =   0 ; i  <  provinces.size(); i ++ ){
                                                            Province province  =  (Province)provinces.get(i);
                                                             String  pid  =  province.getId();
                                                            out.print( " <option value= " +  pid  + " > " +  province.getProvince()  + " </option> " );
                                                        }
                                                    }
                                                    
                                                 %>
                                             </ select >
                                         </ td >
                                         < td >
                                             < label > 城市 </ label >
                                             < input  type ="text"  id ="city"  name ="city"  style ="width: 200px; height: 25px"  onfocus ="changeProvince(this)"   />
                                             < input  type ="button"  value ="添加城市"  style ="width:80px; height: 25px"  onclick ="addCity()"   />
                                         </ td >
                                     </ tr >
                                 </ table >
                             </ fieldset >

changeCountry:

function  changeCountry(obj){
     // 取得所选的国家
     var  countryId  =  $( " countries " ).value;
     if (countryId  ==   0 ){
        alert( " 请选择国家,如国家列表为空,请先添加国家,以便能准确添加市级地区 " );
        $( " countries " ).focus();
         return ;
    }
     //  取得所选择的省
     else {
        url = " ChangeCountry?countryId= " ;
         var  countryId  =  $( " countries " ).value;
        url = url + countryId;
        xmlHtpRq = ajaxObj = createAjaxObject();
        xmlHtpRq.open( " GET " ,url, true );
        xmlHtpRq.setRequestHeader( " Content-Type " , " text/html;charset=UTF-8 " );
        xmlHtpRq.onreadystatechange  = function (){OnStatusChange();} //  注册回调函数,接收服务器的响应
        xmlHtpRq.send();
    }
    
}

OnStatusChange：

function  OnStatusChange(){     // 回调函数,接收服务器的响应()
             if (ajaxObj.readyState == 4 ){
             if  (xmlHtpRq.status == 200 ){            
                 var  status  =  xmlHtpRq.responseXML.getElementsByTagName( " status " )[ 0 ].firstChild.data;
                
                 if ( status  ==   " ok " ){    

                     var  subInnerHTML  =  xmlHtpRq.responseXML.getElementsByTagName( " content " )[ 0 ].xml;
                    
                     // alert(subInnerHTML);
                    
                     var  classNameDiv  =  document.getElementById( " provincesTd " );
                    
                     var  provinces  =  document.getElementById( " provinces " );
                    
                    document.getElementById( " provincesTd " ).removeChild(provinces);
                    
                    classNameDiv.innerHTML = subInnerHTML;
    
                } 
            }
             else // 页面不正常
                alert(xmlHtpRq.status);     //  输出状态码
                
            }       

changeProvinces：

function  changeProvinces(obj,myarray){
     // 取得省份数组
     var  arr  =  myarray;
     var  vform = obj.form;
     //  取得省份下拉框并清除原有选项
     var  provinces = vform[ " provinces " ];
    provinces.length = 0 ;

     //  重新填充到省份下拉框
     for ( var  i = 0 ;i < arr.length;i ++ ){
        provinces[i + 1 ] = new  Option(arr[i],i);
    }    
}

ChangeCountryServlet：

package  com.runsky.action;

import  java.io.PrintWriter;
import  java.util.List;

import  javax.servlet.ServletException;
import  javax.servlet.http.HttpServlet;
import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;

import  com.runsky.domain.City;
import  com.runsky.domain.Country;
import  com.runsky.domain.Province;
import  com.runsky.service.BaseService;
import  com.runsky.util.StringFormatUtil;

/**
 * 添加省份
 * 
 *  @author Ying-er
 *  @since  2010-1-14 下午03:34:36
 *  @version  1.00 Ying-er 创建 2010-1-14 下午03:34:36
  */
public   class  ChangeCountryServlet  extends  HttpServlet {

     /**
     * 
      */
     private   static   final   long  serialVersionUID  =   1343432526456565L ;

     public   void  doPost(HttpServletRequest request, HttpServletResponse response)
             throws  ServletException, java.io.IOException {
         //  Setup Response
        response.setContentType( " text/xml;charset=UTF-8 " );
        response.setHeader( " Cache-Control " ,  " no-cache " );
        response.setCharacterEncoding( " UTF-8 " );

         //  取得输入参数
        String countryId  =  StringFormatUtil
                .getDecodeParamFromReq( " countryId " , request);
         //  System.out.println("------------------------------------------>"+str);
        BaseService < Province >  pService  =   new  BaseService < Province > ();
        List < Province >  provinceList  =  pService.getByField(Province. class ,  " countryId " , countryId);
        PrintWriter out  =  response.getWriter();
        
             if (provinceList.size() < 1   ||  provinceList  ==   null ){
                out.println( " <response> " );
                out.println( " <status>ok</status> " );
                out.print( " <content> " );
                out.print( " <select name='provinces' id='provinces'> " );
                out.print( " <option value='0'> --    无数据   -- </option> " );
                out.print( " </select> " );
                out.print( " </content> " );
                out.println( " </response> " );
            }
             else {
                out.println( " <response> " );
                out.println( " <status>ok</status> " );
                out.print( " <content> " );
                    out.print( " <select name='provinces' id='provinces'> " );
                    out.print( " <option value='0'> -- 请选择 -- </option> " );
                     for (Province province : provinceList){
                        out.print( " <option value=' "   +  province.getId()  +   " '> "
                                 +  province.getProvince()  +   " </option> " );
                    }
                    out.print( " </select> " );
                out.print( " </content> " );
                out.println( " </response> " );
            }
            
        
    }

     public   void  doGet(HttpServletRequest request, HttpServletResponse response)
             throws  ServletException, java.io.IOException {
        doPost(request, response);
    }
}