AJAX实现级联列表，入门级实现方式

直接贴代码吧，前台代码用js语言实现

<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
     if(window.ActiveXObject)
     {
     		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     else{
          xmlHttp=new XMLHttpRequest();
     }
  }
   function refresh(){
     	createXMLHttpRequest();
    		var fobj=document.getElementsByName("prov")[0];//获取列表对象
		   var index=fobj.selectedIndex;
		   var p=fobj.options[index].value;
		    
		   
		  var url="servlet/JsonServlet";
		  var param="proc="+encodeURI(p);
		   xmlHttp.open("post", url, "true");
		   //处理post传输的字符编码问题
		   xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");	
		   //注册回调函数 
		   xmlHttp.onreadystatechange=callback;
		   //发送消息		
			 xmlHttp.send(param);
			//xmlHttp.send();
		   
     }<pre name="code" class="javascript">function callback(){
     if(xmlHttp.readyState==4&&xmlHttp.status==200){
          var citylist=xmlHttp.responseText.split(",");
        //  alert(citylist);
           var obj = document.all("city");
          var citynum=citylist.length;
         //  alert(citynum);
             for (var j = obj.options.length - 1; j >= 0; j--) { 
                   obj.options.remove(j); //从后往前删除 
                     } 
            
          for(var  i=0;i<citynum;i++){
          		 var oOption = document.createElement("OPTION"); //创建一个OPTION节点 
                 obj.options.add(oOption);    //将节点加入city选项中 
                 oOption.innerText = citylist[i];    //设置选择展示的信息 
                 oOption.value = citylist[i];         //设置选项的值 
          }
     
     }
  }    

HTML显示部分如下：

 <form action="#" method="post"> 
    <select name="prov"  οnchange="refresh()" >
    <span style="white-space:pre">	</span><option value="">--请选择省份--</option>
    <span style="white-space:pre">	</span><option value="山东">山东</option>
    <span style="white-space:pre">	</span><option value="江苏">江苏</option>
    <span style="white-space:pre">	</span><option value="广东">广东</option>
    
    </select>
    <select name="city">
    <option value="">--请选择城市--</option>
    </select>
    
    </form>

后台用servlet进行数据处理

 <span style="white-space:pre">		</span>request.setCharacterEncoding("UTF-8");
<span style="white-space:pre">		</span>Map<String,String> pm =new HashMap<String,String>();
<span style="white-space:pre">	</span>   
<span style="white-space:pre">		</span>pm.put("山东", "德州,枣庄,烟台,潍坊,聊城");
<span style="white-space:pre">		</span>pm.put("江苏", "南京,苏州,无锡,连云港,常州");
<span style="white-space:pre">		</span>pm.put("广东", "广州,深圳,珠海,佛山");
<span style="white-space:pre">		</span>pm.put("", "请先选择省份");
<span style="white-space:pre">		</span>String proc=request.getParameter("proc");

<span style="white-space:pre">		</span>//用于post传输方式下对文字乱码的处理
<span style="white-space:pre">		</span>String  p = java.net.URLDecoder.decode(proc, "UTF-8");
<span style="white-space:pre">		</span>System.out.println(p);//输出检测乱码处理是否成功
<span style="white-space:pre">		</span>System.out.println(pm.get(p));
<span style="white-space:pre">		</span>response.setContentType("text/html;charset=UTF-8");//处理服务器传到客户端字符乱码问题(切记中间是;第一次写成了",",调bug差点吐血)
<span style="white-space:pre">		</span>PrintWriter out =response.getWriter();
<span style="white-space:pre">		</span>out.print(pm.get(p));
<span style="white-space:pre">	</span>  <span style="white-space:pre">	</span>out.flush();
<span style="white-space:pre">	</span>  <span style="white-space:pre">	</span>out.close();

显示的效果：

       <img src="https://img-blog.youkuaiyun.com/20150926160256132" alt="" /><img src="https://img-blog.youkuaiyun.com/20150926160320444" alt="" />
<span style="white-space:pre">		</span>