Ajax+struts实现级联菜单~学习笔记 -

rfheh

浏览: 14378 次
性别:
来自: 广州

最近访客更多访客>>

玄夜_31050

xhylxx

yang_a

2572837889

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (5)

社区版块

存档分类

Ajax+struts实现级联菜单~学习笔记

struts javascript ajax

1，数据库表

sheng(省份)：id, uname; shi(市)：id,uname,shengId;   xian(县)：id,uname,xianId;

2，新建项目：menuDemo，并添加struts和hibernate引用。

3，创建各个表的dao层方法，返回为List集合，该部分省略。

4，创建MenuAction，继承DispatchAction;

package web.action;

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

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

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 dao.ShengDao;
import dao.ShiDao;
import dao.XianDao;
import entity.Shi;
import entity.Xian;

public class MenuAction extends DispatchAction {

public ActionForward searchCity(ActionMapping mapping, ActionForm form,
    HttpServletRequest request, HttpServletResponse response)
    throws Exception {
   int id = Integer.parseInt(request.getParameter("id"));
   System.out.println(id);
   String searchType = request.getParameter("searchType");
//必须有这句话，负责页面不能解析xml文件
   StringBuffer responseXML = new StringBuffer("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
    responseXML.append("<domains>");
   if(searchType.equals("shi")){
    ShiDao shiDao = new ShiDao();
    List list = shiDao.getShi(id);
    Iterator it = list.iterator();
    while(it.hasNext()){
     Shi shi = (Shi)it.next();
     responseXML.append("<domain");
     responseXML.append(" id='" + shi.getId());
     responseXML.append("'>");
     responseXML.append(shi.getUname());
     responseXML.append("</domain>");
    }
   }
   if(searchType.equals("xian")){
    XianDao xianDao = new XianDao();
    List list = xianDao.getXian(id);
    Iterator it = list.iterator();
    while(it.hasNext()){
     Xian xian = (Xian)it.next();
     responseXML.append("<domain");
     responseXML.append(" id='" + xian.getId());
     responseXML.append("'>");
     responseXML.append(xian.getUname());
     responseXML.append("</domain>");
    }
   }
   responseXML.append("</domains>");

   response.setContentType("text/xml; charset=UTF-8");
   response.setHeader("Cache-Control", "no-cache");
   try {
   PrintWriter out = (PrintWriter) response.getWriter();
    out.write(responseXML.toString());
    System.out.println(responseXML.toString());
    // out.flush();
   } catch (IOException e) {
    // do nothing
    e.printStackTrace();
   }
//返回空值，忽略struts-config.xml配置中的结果页
return null;
}
public ActionForward showSheng(ActionMapping mapping, ActionForm form,
    HttpServletRequest request, HttpServletResponse response)
    throws Exception {
   ShengDao shengDao = new ShengDao();
   List list = shengDao.getSheng();
   System.out.println(list.size());
   request.setAttribute("shengs", list);
   return mapping.findForward("showSheng");
}
}

1，struts-config.xml文件配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd">

<struts-config>
<data-sources />
<form-beans>
<form-bean name="shengForm" type="web.form.ShengForm"></form-bean>
</form-beans>
<global-exceptions />
<global-forwards />
<action-mappings>
<action path="/searchCity" type="web.action.MenuAction" scope="request" parameter="doType"></action>
<action path="/showSheng" type="web.action.MenuAction" scope="request" parameter="doType">
   <forward name="showSheng" path="/index.jsp"></forward>
</action>
</action-mappings>
<message-resources parameter="web.ApplicationResources" />
</struts-config>

2，html代码如下：

<body>
    <form action="addPersonal.do" method="post">

   省:<select id="sheng" name="sheng" onchange="srarchCity('sheng')">     <%
     List list = (List)request.getAttribute("shengs");
                for(int i=0; i < list.size(); i++){
                Sheng sheng =(Sheng)list.get(i);
                %>
                   <option value="<%=sheng.getId() %>"><%=sheng.getUname() %></option>
                <%
                }
     %>
    </select><br>
    市：<select id="shi" name="shi" onchange="srarchCity('shi')"></select><br>
    县：<select id="xian" name="xian"></select>
</form>

</body>

1，html页面的javascript代码如下：

<script type="text/javascript">
var xmlHttpRequest;
var type;
function createXmlHttpRequest(){
   if(window.ActiveXObject){
    return new ActiveXObject("Microsoft.XMLHTTP");
   }else if(window.XMLHttpRequest){
    return new XMLHttpRequest();
   }
}
function srarchCity(obj){
   var id;
   type = obj;
   var url;
   if(obj=="sheng"){
    id=document.getElementById("sheng").value;
    url = "searchCity.do?doType=searchCity&searchType=shi&id="+id;
   }
   if(obj=="shi"){
    id=document.getElementById("shi").value;
    url = "searchCity.do?doType=searchCity&searchType=xian&id="+id;
   }

   xmlHttpRequest = createXmlHttpRequest();
   xmlHttpRequest.onreadystatechange = xianshipass;
   xmlHttpRequest.open("GET",url,true);
   xmlHttpRequest.send(null);
}
function xianshipass(){
   if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status == 200){
    updateMenu();
   }
}
function updateMenu(){
   var select;
   if(type=="sheng"){
    select = document.getElementById("shi");
   }
   if(type=="shi"){
    select = document.getElementById("xian");
   }
   select.options.length=0;
     var options = xmlHttpRequest.responseXML.getElementsByTagName("domain");
    alert(options.length);
      var option;
       for (var i = 0, n = options.length; i < n; i++) {
      select.appendChild(createElementWithValue(options[i]));
       }

}
function createElementWithValue(text) {
             var element = document.createElement("option");
             element.setAttribute("value", text.getAttribute("id"));
             var text = document.createTextNode(text.firstChild.nodeValue);
             element.appendChild(text);
             return element;
   }
</script>

关于select添加<option>元素时，出现[Exception... "Not enough arguments [nsIDOMHTMLSelectElement.add]" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" lo错误
opt=document.createElement("OPTION");
            opt.value=subArray[1];
            opt.text=subArray[2];
            document.getElementByIdx("xxx").add(opt);

这样写不符合w3c标准。
所以
document.getElementByIdx("xxx").options.add(opt);
这样写，就正常了。

分享到：