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());    
    }
%>