ajax做三级联动

很多地方需要ajax三级联动才能完成功能；我就按我的步聚来一步一步写，如果有不懂，可以Q我，我也可以发包给他.  对了，用struts 和 hibernate 容易实现

先经过一个login.jsp页面，这个页面主要是实现一次请求，来查询表，查询出三级联动的第一级

（国家--省份--市）,先查出 国家,

login.jsp

 

<% ... @ page contentType="text/html;charset=UTF-8"  %>
< html >
< head >
    < script > ...
   function loginDiv()
   ...{
      window.location.href="index.do?action=findFinace&id=0";
   }
    </ script >
</ head >
< body >
    < form  >
       < input  type ="button"  value ="点击进入AJAX三级联动"  onclick ="loginDiv()" >< p >
      
    </ form >
</ body >
</ html >

 2,点击经过action ,调用find方法

 

/**/ /*
 * Generated by MyEclipse Struts
 * Template path: templates/java/JavaClass.vtl
 */
package  com.demo;


import  java.io.BufferedWriter;
import  java.io.FileOutputStream;
import  java.io.FileWriter;
import  java.io.IOException;
import  java.io.PrintWriter;
import  java.sql.Connection;
import  java.sql.DriverManager;
import  java.sql.PreparedStatement;
import  java.sql.ResultSet;
import  java.util.ArrayList;
import  java.util.Iterator;
import  java.util.List;
import  java.util.Vector;

import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;
import  org.apache.struts.action.Action;
import  org.apache.struts.action.ActionForm;
import  org.apache.struts.action.ActionForward;
import  org.apache.struts.action.ActionMapping;
import  org.apache.struts.actions.DispatchAction;
import  org.hibernate.Session;
import  org.hibernate.SessionFactory;
import  org.hibernate.Transaction;
import  org.hibernate.cfg.Configuration;
import  org.jdom.Document;
import  org.jdom.Element;
import  org.jdom.output.Format;
import  org.jdom.output.XMLOutputter;

import  com.demo.pojo.Area;
import  com.demo.pojo.Bbs;
import  com.demo.pojo.Financing;

/** */ /** 
 * MyEclipse Struts
 * Creation date: 11-08-2007
 * 
 * XDoclet definition:
 * @struts.action path="/login" name="loginForm" scope="request"
 */
public   class  IndexAction  extends  DispatchAction ... {
    /**//*
     * Generated Methods
     */

    /** *//** 
     * Method execute
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @return ActionForward
     */
    public ActionForward query(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) ...{
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        response.setCharacterEncoding("UTF-8");

        String strid=request.getParameter("id");
        if(strid!=null)...{
            int id=Integer.parseInt(request.getParameter("id"));
            Integer idt=new Integer(id);
            Session session =this.getSesion();
            Transaction tx=null;
            tx=session.beginTransaction();

            List listProv=session.createQuery(" from Area as a where a.areaid="+idt).list();
            Document doc=new Document();
            Element root=new Element("roots");
            /**//*for(Object o:listProv){
                System.out.println("eeeeeeeeeeeeeeeeeeeeeeeee");
                Element prov=new Element("provs");
                prov.addContent(new Element("area").addContent(((Area)o).getArea()));
                //prov.addContent(((Area)o).getArea());
                root.addContent(prov);
            }*/
            
            //  锟矫碉拷锟斤拷
            Iterator iter=listProv.iterator();
            while(iter.hasNext())...{
                Area area=(Area)iter.next();
                Element prov=new Element("provs");
                prov.addContent(new Element("areas").addContent(area.getArea()));
                prov.addContent(new Element("id").addContent(area.getId().toString()));
                root.addContent(prov);
            } 
            doc.addContent(root);
            XMLOutputter outputter=new XMLOutputter(Format.getPrettyFormat().setEncoding("UTF-8"));
            try ...{
                
                //PrintWriter wr = new PrintWriter(new BufferedWriter(new FileWriter("c:/do.txt")));
                outputter.output(doc,response.getWriter());
            } catch (Exception e) ...{
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            tx.commit();

        }
                return null;
        
    }
    
    public ActionForward find(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) ...{
        response.setCharacterEncoding("UTF-8");
        Session session =this.getSesion();
        Transaction tx=null;
        tx=session.beginTransaction();
        List listCountry=session.createQuery(" from Area as a where areaid=0").list();
        request.setAttribute("listCountry", listCountry);
        tx.commit();
        session.close();
        
        return mapping.findForward("index");
    }
    
    public Session getSesion()...{
        SessionFactory sessionFactory=null;
        Configuration config=new Configuration().configure("hibernate.cfg.xml");
        sessionFactory=config.buildSessionFactory();
        
        Session session =sessionFactory.openSession();
        return session;
    }
    
}

返回三级联动页面

index.jsp

 

<% ... @ page contentType="text/html;charset=UTF-8" %>
<% ... @ taglib uri="/WEB-INF/struts-html.tld" prefix="html"   %>
<% ... @ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"   %>
<% ... @ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"  %>
< html >
   < head >

   < title > My JSP 'index.jsp' starting page </ title >
   </ head >
   < script  type ="text/javascript"  src ="../script/calendar.js" ></ script >
   < script > ...
      var xmlHttp;
      function cerateXMLHttpRequest()
      ...{
          if(window.XMLHttpRequest)
          ...{
              xmlHttp = new XMLHttpRequest();
          }else if(window.ActiveXObject)
          ...{
              try...{
                  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
              }catch(e)...{
                  try...{
                      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                  }catch(e)...{
                      alert("创建异步对象失败");
                  }
              }
          }
          if(!xmlHttp)
          ...{
              alert("创建异步对象失败");
              return;
          }
      }

      
      //利用ajaxa+struts做三级联动
      //选择国家
      function selectCountry(country)
      ...{
         if(country=="")
         ...{
            document.f.selectProvince.options.length = 1;
            document.f.selectCity.options.length = 1;
            return;
         }
         sendSelectCountry("index.do?action=query&id="+country);
      }
      //ajaxa发送函数,发送国家
      function sendSelectCountry(url)
      ...{
          cerateXMLHttpRequest();
          xmlHttp.open("get",url,true);
          xmlHttp.onreadystatechange=processCountry;
          //xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
          xmlHttp.send(null);
          
      }
      //以国家来 返回省的响应函数
      function processCountry()
      ...{
         if(xmlHttp.readyState==4)
          ...{
              if(xmlHttp.status==200)
              ...{
                 var doc=xmlHttp.responseXML;
                 var pro=doc.getElementsByTagName("provs");
                 document.f.selectProvince.options.length = 1;
                 document.f.selectCity.options.length = 1;
                 for(var i=0;i<pro.length;i++)...{
                    var p=pro[i];
                    document.f.selectProvince.add(new Option(p.childNodes[0].firstChild.data,p.childNodes[1].firstChild.data));
                 }
                 
                 

              }else...{
                  alert("请求页面异常");
              }
          }
      }
      
      //选择省份
      function selectProv(province)
      ...{
         if(province=="")
         ...{
            document.f.selectCity.options.length = 1;
            return;
         }
         sendSelectProvince("index.do?action=query&id="+province);
      }
      //ajaxa发送函数,发送省份
      function sendSelectProvince(url)
      ...{
          cerateXMLHttpRequest();
          xmlHttp.open("get",url,true);
          xmlHttp.onreadystatechange=processProvince;
          //xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
          xmlHttp.send(null);
          
      }
      //以省份来 返回 市的响应函数
      function processProvince()
      ...{
         if(xmlHttp.readyState==4)
          ...{
              if(xmlHttp.status==200)
              ...{
                 var doc=xmlHttp.responseXML;
                 var pro=doc.getElementsByTagName("provs");
                 document.f.selectCity.options.length = 1;
                 for(var i=0;i<pro.length;i++)...{
                    var p=pro[i];
                    document.f.selectCity.add(new Option(p.childNodes[0].firstChild.data,p.childNodes[1].firstChild.data));
                 }
                 
                 

              }else...{
                  alert("请求页面异常");
              }
          }
      }
      
   </ script >
 
   < body >
       < form  name ="f" >
           < h3  id ="findmates" > 利用ajaxa+struts做三级联动 </ h3 >
                            
                                     < p >
                                        请选择国家 < select  name ="province"  onchange ="selectCountry(this.value)" >
                                                         < option  value ="" > --请选择-- </ option >
                                                     
                                                    < logic:present  name ="listCountry" >
                                                       < logic:iterate  collection ="${listCountry}"   id ="lis" >
                                                           < option  value ="${lis.id }" > ${lis.area } </ option >            
                                                        </ logic:iterate >
                                                     </ logic:present >
                                                  </ select >
                                        请选择省份 < select  name ="selectProvince"  onchange ="selectProv(this.value)" >
                                                     < option  value ="" > --请选择-- </ option >
                                                    
                                                 </ select >
                                        请选择市 < select  name ="selectCity" >
                                                     < option  value ="" > --请选择-- </ option >
                                                 </ select >
                                     </ p >
                                    
                                                
                              
        
       </ form >
   </ body >
</ html >

点击国家，他就会去通过ajax 调用 action里面的 query()方法

在把值给下一级

struts-config.xml和 hibernate.hibernate.cfg.xml 怎么配制 我想你们会知道怎么配制