AJAX示例应用-2（两级菜单的联动）-方式1（服务器以字符串形式返回子类别的id，name）

1.第一级菜单是取出我的网上商城商品类别的根类别，第二级菜单则是取出该类别下的子类别，首先附上得到根类别的源码以及菜单源码：

 

<%
            List<Category> categories = Category.getCategories();
            List<Category> topCategories = new ArrayList<Category>();
            for(int i=0; i<categories.size(); i++) ...{
                Category c = categories.get(i);
                if(c.getGrade() == 1//根类别的garde=1) {
                    topCategories.add(c);
                }
            }
            
%>

 

<SELECT class=wenbenkuang name=category1 onchange="changeCategory()">
         <OPTION value=0 selected>查询一级目录</OPTION>
               <%...
                            for(int i=0; i<topCategories.size(); i++) {
                                    Category c = topCategories.get(i);
                    %>
                                                    
         <OPTION value=<%=c.getId()%>><%=c.getName()%></OPTION>
      <%...    
                             }
          %>
</SELECT>
                                                                              
 <SELECT class=wenbenkuang name=category2>
        <OPTION value=0 selected>查询二级目录</OPTION>
 </SELECT>

 

2.javascript代码：

 

 

<script type="text/javascript">
                        var req;
                        function changeCategory() ......{
                            var id = document.form2.category1.options[document.form2.category1.selectedIndex];
                            
                            var url = "getsecondcategories_1.jsp?id=" + escape(id.value);
                            
                            if(window.XMLHttpRequest) ......{
                                req = new XMLHttpRequest();
                            } else if (window.ActiveXObject) ......{
                                req = new ActiveXObject("Microsoft.XMLHTTP");
                            }
                            req.open("GET", url, true);
                            req.onreadystatechange = callback;
                            req.send(null);
                        }
                    
                        function callback() ......{
                            if(req.readyState == 4) ......{
                                if(req.status == 200) ......{
                                    parse(req.responseText);
                                  }
                            }
                        }
                        
                        function parse(msg) ......{
                            msg = msg.replace(/(^s*)|(s*$)/g, "");  //重要！去除空格，换行等字符
                            if(msg == null || new String(msg) == "") ......{
                                document.form2.category2.length = 1;
                                document.form2.category2.selectedIndex = 0;
                                document.form2.category2.options[0].text = '二级子目录';
                                document.form2.category2.options[0].value = '-1';
                                   return;
                            }
                            var categories = msg.split(";");
                            document.form2.category2.length = categories.length + 1;
                            document.form2.category2.selectedIndex = 0;
                            document.form2.category2.options[0].value = '-1';
                               document.form2.category2.options[0].text = '二级子目录';
                            for(var i=0; i<categories.length; i++) ......{
                                var categoryproperty = categories[i].split(",")
                                var id = categoryproperty[0];
                                var name = categoryproperty[1];
                                document.form2.category2.options[i+1].value = id;
                                   document.form2.category2.options[i+1].text = name;
                            }
                        }
</script>

 

3.getsecondcategories_1.jsp（取出子类别，其中以 id号，类别名称； 的方式返回）：

 

<%...@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%...@ page import="com.ycringfinger.shopping.*" %>
<%...

    response.setContentType("text/xml");
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Pragma", "no-cache");
    response.setDateHeader("Expires", 0);
    request.setCharacterEncoding("GB18030");

    int id = Integer.parseInt(request.getParameter("id"));
    Category c = Category.loadById(id);
    List<Category> childs = c.getChilds();
    
    if(childs.size() == 0) {
        response.getWriter().write("");
    } else {
        StringBuffer buf = new StringBuffer();
        for(int i=0; i<childs.size(); i++) {
            Category category = childs.get(i);
            buf.append(category.getId() + "," + category.getName() + ";");
        }
        buf.deleteCharAt(buf.length() - 1); // delete the last ";"
        response.getWriter().write(buf.toString());    
    }
%>