菜单联动的实现二（使用AJAX技术）
1、编写表单<form name="frm" method="get"> <select name="parent" onchange="changeDrop2()"> <option value="-1">请选择</option> <% for(int i=0; i<categories.size(); i++) { Category c = categories.get(i); %> <option value="<%=c.getId() %>"><%=c.getName() %></option> <% } %> </select> <select name="child"> <option value="-1">Child Not Selected!</option> </select> </form> 2、用AJAX实现changeDrop2方法
<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 = "GetCategoryChilds.jsp?id=" + escape(document.frm.parent.options.value); 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);//执行服务器返回的javascript动态脚本 } } } </script> 3、用javascript编写动态脚本
<%int id = Integer.parseInt(request.getParameter("id"));List<Category> childs = CategoryService.getInstance().getChilds(id) ;StringBuffer buf = new StringBuffer();buf.append("document.frm.child.length = " + (childs.size()+1) + ";\n");buf.append("document.frm.child.options.value = '-1';\n");buf.append("document.frm.child.options.text = 'Pls Select!';\n");buf.append("document.frm.child.selectedIndex = 0;\n");for(int i=0; i<childs.size(); i++) {Category c = childs.get(i);buf.append("document.frm.child.options[" + (i+1) + "].value = '" + c.getId() + "';\n");buf.append("document.frm.child.options[" + (i+1) + "].text = '" + c.getName() + "';\n");}response.setContentType("text/html;charset=gbk");response.setHeader("Cache-Control", "no-store"); //HTTP1.1response.setHeader("Pragma", "no-cache"); //HTTP1.0response.setDateHeader("Expires", 0); //prevents catching at proxy serverresponse.getWriter().write(buf.toString());%>
页:
[1]