java ajax二级省市联动

  1.   

 省市二级联动实现，网上找了好多，终于实现了。这里用的是数据库链接查询并用XML方式返回。（用的数据池）

 

1.、编写的index.jsp。

 

Java代码  
  1. <%@ page language="java" import="java.util.*,com.dao.*" pageEncoding="UTF-8"%>  
  2. <%@ page import="com.vo.*" %>  
  3. <%   //这个是调用dao层返回市表中的内容。  
  4.     UserDao ud=new UserDao();  
  5.     ArrayList<Sheng> list=(ArrayList)ud.seclect();  
  6.  %>  
  7.   
  8. <html>  
  9.   <head>  
  10.   <script type="text/javascript" src="js/test.js"></script>  
  11.       
  12.     <title>My JSP 'index.jsp' starting page</title>  
  13.       
  14.   
  15.   </head>  
  16.     
  17.   <body>  
  18.     <form method="post" name="form1"  action="">   
  19.           
  20.         <select id="slt1" onchange="updateSelect()">   
  21.            <option>请选择省份</option>   
  22.         <%   
  23.             Sheng sheng=null;  
  24.           for(int i=0;i<list.size();i++)   
  25.           {   
  26.             
  27.           sheng=(Sheng)list.get(i);   
  28.          %>   
  29.             <option value="<%=sheng.getId()%>"><%=sheng.getName() %></option>   
  30.           <%   
  31.           }   
  32.           %>   
  33.         </select>    
  34.           
  35.         <select id="slt2">   
  36.             <option value="">请选择地市</option>     
  37.         </select>   
  38.      </form>   
  39.       
  40.   </body>  
  41. </html>  
2、编写js代码。
Java代码  
  1. function getXmlHttpRequestObject() {  
  2.     if (window.XMLHttpRequest) {  
  3.         return new XMLHttpRequest();  
  4.     } else {  
  5.         if (window.ActiveXObject) {  
  6.             return new ActiveXObject("Microsoft.XMLHTTP");  
  7.         } else {  
  8.         }  
  9.     }  
  10. }  
  11. function createAjaxObj() {  
  12.     var httprequest = false;  
  13.     if (window.XMLHttpRequest) {  
  14.         httprequest = new XMLHttpRequest();  
  15.         if (httprequest.overrideMimeType) {  
  16.             httprequest.overrideMimeType("text/xml");  
  17.         }  
  18.     } else {  
  19.         if (window.ActiveXObject) {  
  20.             try {  
  21.                 httprequest = new ActiveXObject("Msxml2.XMLHTTP");  
  22.             }  
  23.             catch (e) {  
  24.                 try {  
  25.                     httprequest = new ActiveXObject("Microsoft.XMLHTTP");  
  26.                 }  
  27.                 catch (e) {  
  28.                 }  
  29.             }  
  30.         }  
  31.     }  
  32.     return httprequest;  
  33. }  
  34. var httpReq = createAjaxObj();  
  35. //上边的代码是固定的。  
  36.   
  37. function updateSelect(){  
  38.     var selected = document.all.slt1.value;  
  39.     httpReq.open("GET","testU?tid="+selected,false);  
  40.     httpReq.onreadystatechange=function(){  
  41.         checkReqCallBack();  
  42.     };  
  43.     httpReq.send(null);  
  44. }  
  45.   
  46. function checkReqCallBack(){  
  47.     if(httpReq.readyState == 4) {   
  48.          if(httpReq.status ==200){  
  49.               var xmlDoc = httpReq.responseXML.documentElement;//获得返回的XML文档  
  50.               var xSel = xmlDoc.getElementsByTagName('select');  
  51.               //获得XML文档中的所有<select>标记  
  52.               var select_root = document.getElementById('slt2');  
  53.               //获得网页中的第二个下拉框  
  54.               select_root.options.length=0;  
  55.               //每次获得新的数据的时候先把每二个下拉框架的长度清0  
  56.                 
  57.               for(var i=0;i<xSel.length;i++){  
  58.                 var xValue = xSel[i].childNodes[0].firstChild.nodeValue;  
  59.                 //获得每个<select>标记中的第一个标记的值,也就是<value>标记的值  
  60.                 var xText = xSel[i].childNodes[1].firstChild.nodeValue;  
  61.                 //获得每个<select>标记中的第二个标记的值,也就是<text>标记的值  
  62.                   
  63.                 var option = new Option(xText, xValue);  
  64.                 //根据每组value和text标记的值创建一个option对象  
  65.                   
  66.                 try{  
  67.                   select_root.add(option);//将option对象添加到第二个下拉框中  
  68.                 }catch(e){  
  69.                 }  
  70.               }  
  71.          }else{  
  72.               alert("不能得到描述信息:" + req.statusText);  
  73.          }  
  74.     }  
  75. }  
 
3、编写的servlet。
Java代码  
  1. package com.servlet;  
  2.   
  3.   
  4.   
  5. import java.io.IOException;  
  6. import java.util.ArrayList;  
  7.   
  8. import javax.servlet.ServletException;  
  9. import javax.servlet.http.HttpServlet;  
  10. import javax.servlet.http.HttpServletRequest;  
  11. import javax.servlet.http.HttpServletResponse;  
  12.   
  13. import com.dao.UserDao;  
  14. import com.vo.Shi;  
  15.   
  16. public class TestU extends HttpServlet {  
  17.     public String tid;  
  18.   
  19.       
  20.     private static final long serialVersionUID = 1L;  
  21.   
  22.   
  23.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  24.             throws ServletException, IOException {  
  25.         UserDao ud=new UserDao();  
  26.         try {  
  27.             response.setCharacterEncoding("GBK");  
  28.             response.setContentType("text/xml");  
  29.             response.setHeader("Cache-Control", "no-cache");  
  30.             request.setCharacterEncoding("GBK");  
  31.             response.setCharacterEncoding("UTF-8");  
  32.               
  33.             tid=request.getParameter("tid").toString();  
  34.             ArrayList<?> list=ud.check(tid);  
  35.             String xml_start = "<selects>";  
  36.             String xml_end = "</selects>";  
  37.             String xml = "";  
  38.             Shi shi=null;  
  39.             for(int i=0;i<list.size();i++){  
  40.                 shi=new Shi();  
  41.                 shi=(Shi) list.get(i);  
  42.                 xml+="<select><value>"+shi.getId()+"</value><text>"+shi.getName()+"</text></select>";  
  43.             }  
  44.             String last_xml = xml_start + xml + xml_end;  
  45.             response.getWriter().write(last_xml);  
  46.               
  47.         } catch (Exception e) {  
  48.             e.printStackTrace();  
  49.         }  
  50.           
  51.     }  
  52.   
  53.       
  54.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  55.             throws ServletException, IOException {  
  56.   
  57.         doGet(request,response);  
  58.     }  
  59.   
  60. }  
 

总结：当一级省select改变时出发ajax，调用servlet并在servlet中调用dao层返回查找到的市级表，用ArrayList返回给servlet，在servlet中生成XML代码。

在js中用XML方式解析，（1、取得获得XML文档中的所有<select>标记，为以后的迭代准备。2、取得页面的市节点，创建一个option对象，将option对象添加到第二个下拉框中。）。


posted @ 2012-06-13 21:35  狂奔的蜗牛cn  阅读(393)  评论(0)  编辑  收藏  举报