AJAX示例二（下拉列表联动）

首先从ProductSearchAjax页面获取顶级类别，改变类别时调用changeDrop2方法，通过AJAX提交到getChildCategorys.jsp页面，该页面获取子类别，并组装返回的字符串。ProductSearchAjax页面通过返回的字符串来生成相应的子类别。

ProductSearchAjax页面：

<form action="" name="frm" method="get">
     <select name="parent" οnchange="changeDrop2()">
      <option value="1">请选择</option>
     
     <%
      for(int i=0;i<topCategorys.size();i++){
       Category top=topCategorys.get(i);
     %>
      <option value="<%=top.getId() %>"><%=top.getName() %></option>
     <%} %>
     </select>
     <select name="child" >
      <option value="-2">选择子类</option>
     </select>
</form>

 

<script type="text/javascript">
 var req;
 function init() {
   if(window.XMLHttpRequest) {
    req = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
   }
  }

 function changeDrop2(){
  init();
  var url="getChildCategorys.jsp?id="+escape(document.frm.parent.options[document.frm.parent.selectedIndex].value);
  alert(url);
  req.open("GET",url,true);
  req.onreadystatechange = callback;
  req.send(null);
 }
 
 function callback() {
   if(4 == req.readyState) {
  
    if(200 == req.status) {
     //alert(req.responseText);
     eval(req.responseText);
    }
   }
   
 }
</script>

 

getChildCategorys.jsp页面：

<%
 int id=Integer.parseInt(request.getParameter("id"));
 System.out.println(id);
 ArrayList<Category> childs=CategoryService.getInstance().getChildsById(id);
 //System.out.println("子类别个数："+childs.size());
 StringBuffer strBuff=new StringBuffer();
 strBuff.append("document.frm.child.length="+(childs.size()+1)+";n");
 strBuff.append("document.frm.child.options[0].value='-1';n");
 strBuff.append("document.frm.child.options[0].text='请选择子类别：';n");
 strBuff.append("document.frm.child.selectedIndex=0;n");
 for(int i=0;i<childs.size();i++){
  Category c=childs.get(i);
  System.out.println(c.getName());
  strBuff.append("document.frm.child.options["+(i+1)+"].value='"+c.getId()+"';n");
  strBuff.append("document.frm.child.options["+(i+1)+"].text='"+c.getName()+"';n");
 }
 //System.out.println(strBuff);
 response.setContentType("text/html;charset=gbk");
 response.setHeader("Cache-Control", "no-store"); //HTTP1.1
 response.setHeader("Pragma", "no-cache"); //HTTP1.0
 response.setDateHeader("Expires", 0); //prevents catching at proxy server
 
 response.getWriter().write(strBuff.toString());
%>