ajax 编写地区联动展现


-------------------servletImpl-------------
public class LoadServiceImpl implements LoadService {
    
    public Map<String, List<String>> map=new HashMap<String, List<String>>();//存放省份及对应城市

    /**
    *    初始化数据
    **/
    public LoadServiceImpl(){
        String[] city1=new String[]{"新乡","郑州","南阳"};
        String [] city2=new String[]{"济南","蓬莱","青岛"};
        map.put("河南", Arrays.asList(city1));   //将数组转换成list集合
        map.put("山东", Arrays.asList(city2));
    }
    
    /**
    *        加载省份
    **/
    public List<String> loadProvince() {
        List< String> list=null;
        list=new ArrayList<String>(map.keySet());  //获取省份并将其转换为list的集合
        return list;
    }
    
    /**
    *    加载对应的城市

    **/
    public List<String> loadCity(String name) {
        
        return map.get(name);
    }
}


-----------servlet  code------------------------------
public class LoadInfo extends HttpServlet {

    LoadService service=new LoadServiceImpl();
    @Override
    protected void service(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        
        String method=request.getParameter("method");
        if("city".equals(method)){
            loadCity(request,response);
            
        }else {
            loadProvince(request,response);
        }
    }
    
    public void loadProvince(HttpServletRequest request,
            HttpServletResponse response) throws IOException{
        
        List<String> list=service.loadProvince();
        StringBuffer pro=new StringBuffer();
        pro.append("[");
        for(int i=0;i<list.size();i++){
            pro.append("'").append(list.get(i)).append("'");
            if(i<list.size()-1){
                pro.append(",");
            }
        }
        pro.append("]");
        response.setContentType("text/json; charset=UTF-8");
        response.getWriter().print(pro.toString());
    }
    
    public void loadCity(HttpServletRequest request,
            HttpServletResponse response) throws IOException{
        String name=request.getParameter("name");
        List<String > list=service.loadCity(name);
        StringBuffer city=new StringBuffer();
        city.append("[");
        for(int i=0;i<list.size();i++){
            city.append("'").append(list.get(i)).append("'");
            if(i<list.size()-1){
                city.append(",");
            }
        }
        city.append("]");
        response.setContentType("text/json; charset=UTF-8");
        response.getWriter().print(city.toString());
    }
}

----------------------html/  jap------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript">
        function createXmlHttpRequest(){
            var xmlhttp = null;
            try{
                                //Firefox, Opera 8.0+, Safari
                                 xmlhttp=new XMLHttpRequest();
            }catch(e){
            //IEIE7.0以下的浏览器以ActiveX组件的方式来创建XMLHttpRequest对象
            var MSXML = ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
            'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
            'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
                  for(var n = 0; n < MSXML.length; n ++){
                                         try{
                                   xmlhttp = new ActiveXObject(MSXML[n]);
                                   break;
                                        }catch(e){}}
                                  }
            return xmlhttp;
        }
        
        
        
        function loadProvince(){
         
              var xhr=createXmlHttpRequest();
            xhr.onreadystatechange=function(){
              if(xhr.readyState==4){ //判断对象状态 4代表完成
                    if(xhr.status==200){ //信息已经成功返回，开始处理信息
                        var pro=eval("("+xhr.responseText+")");
                        var option="<option>-请选择</option>";
                        for(var i=0;i<pro.length;i++){
                            option+="<option>"+pro[i]+"</option>";
                        }
                      document.getElementById("province").innerHTML=option;
                    }
              }

            }
            
            xhr.open("get","loadInfo",true);
            xhr.send(null);
         
            
        }
        
        function loadCity(v){
          if(v!="-请选择"){
            var xhr=createXmlHttpRequest();
            xhr.onreadystatechange=function(){
              if(xhr.readyState==4){ //判断对象状态 4代表完成
                    if(xhr.status==200){ //信息已经成功返回，开始处理信息
                       var city=eval("("+xhr.responseText+")");
                        var option="<option>-请选择</option>";
                        for(var i=0;i<city.length;i++){
                            option+="<option>"+city[i]+"</option>";
                        }
                      document.getElementById("city").innerHTML=option;
                    }
              }

            }
            xhr.open("post","loadInfo",true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send("method=city&name="+v);
          }else{
             var c=document.getElementById("city");
             c.innerHTML="<option>-请选择</option>";
          }
        }
        
        window.onload=function(){
            loadProvince();
            
        }
        
    </script>

  </head>
  
  <body>
      省份：<select id="province" onchange="loadCity(this.value)"></select>    城市：<select id="city"></select>    
  </body>
</html>
posted @ 2012-12-13 17:08 乡间小路上阅读(79) 评论(0) 收藏举报
刷新页面返回顶部
乡间小路上

ajax 编写地区联动展现

公告
