首页 »Javascript教程 » ajax二级联动:ajax二级联动菜单 »正文ajax二级联动:ajax二级联动菜单来源: 发布时间:星期四, 2009年2月12日 浏览:153次 评论:0
最进同学要我做了个 2级联动菜单  参考了网上  些资料再自己做了些修改自我感觉做还可以了啊呵呵乱砍了！页面代码如下: <%@ page contentType="text/html;char  =UTF-8" language="java"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <head> <META http-equiv=Content-Type content="text/html; char =UTF-8"> </head> <script language="javascript"> var xmlHttp; function createXMLHttpRequest  {  (window.ActiveXObject){ xmlHttp=  ActiveXObject("Microsoft.XMLHTTP"); }  (window.XMLHttpRequest){ xmlHttp= XMLHttpRequest; } } function sendRequest(url) { createXMLHttpRequest ; xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = processResponse;//指定响应  xmlHttp.send(null); // 发送请求 } // 处理返回信息 function processResponse { (xmlHttp.readyState 4){ (xmlHttp.status200){ // 信息已经成功返回开始处理信息 updateList ; } { //页面不正常 window.alert("您所请求 页面有异常 "); } } } // 刷新列表框 function refreshList { var sort = document.getElementById("sort").value; (sort "" ) { clearList ;  ; } var url = "dylistservelt?sort=" + sort; sendRequest(url) } // 更新列表框中列表项 function updateList { clearList ; var product = document.getElementById("product"); var results = xmlHttp.responseXML.getElementsByTagName("name"); var option = null; for(var i = 0; i < results.length; i  ) { option = document.createElement("option"); option.appendChild(document.createTextNode(results[i].firstChild. nodeValue)); product.appendChild(option); } } // 清除列表框中原有选项 function clearList { var product = document.getElementById("product"); while(product.childNodes.length > 0) { product.removeChild(product.childNodes[0]); } var product = document.getElementById("product"); option = document.createElement("option"); option.appendChild(document.createTextNode("--pelase select--")); product.appendChild(option); } </script> <table style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=2 width=200 bgColor=#f5efe7 border=0> <TR> <TD align=middle height=4 colspan="2"> <IMG height=4 src="images/promo_list_top.g " width="100%" border=0> </TD> </TR> <TR> <TD align=middle bgColor=#dbc2b0 height=19 colspan="2"> <B>商品搜索 </B> </TD> </TR> <tr> <td height="20"> 品牌选择: </td> <td height="20"> <select id="sort" _disibledevent=><c: test="${not empty list1}"> <option value=""> --Please Select-- </option> </c: > <c:forEach items="${list1}" var="sd" varStatus="status"> <option value="${sd.name}"> ${sd.name} </option> </c:forEach> </select> </td> </tr> <tr> <td height="20"> 商品信息: </td> <td height="20"> <select id="product"> <option value="please select"> --please select-- </option> </select> </td> </tr> </table> ListDataServlet代码如下: package org.servlet; import java.io.IOException; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.bean.SortBean; public  ListDataServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { java.sql.Connection conn = null; Statement db = null; ResultSet rs; String strSql = null; ArrayList list = ArrayList;  i=0; try { Class.forName("com.mysql.jdbc.Driver"); conn = DriverManager .getConnection( "jdbc:mysql://localhost/test?useUnicode=true&characterEncoding=gbk", "root", "123456"); } catch (SQLException ex) {  .out.prln(ex.getMessage + "路径 "); } catch (ClassNotFoundException ex) { .out.prln(ex.getMessage + "驱动"); } try { strSql = "select * from sort"; db = conn.createStatement ; rs = db.executeQuery(strSql); while (rs.next ) { SortBean sort = SortBean; sort. Name(rs.getString("name")); sort. Id(rs.getInt("id")); list.add(i, sort); i; } .out.prln(list.size); ArrayList list1= ArrayList; request.getSession .Attribute("list1",list); response.sendRedirect("dyList.jsp"); } catch (SQLException e) {e.pr StackTrace;} } } 这里我没用bean来实现数据库取数据 功能而是直接在servlet里面实现了这些功能代码可能太混乱了敬请原谅但是我希望大家能够直接拿过去用了！所以有些优化事情我没去做了以后要努力了！ DyListServlet代码如下: package org.servlet; import java.io.IOException; import java.io.Pr Writer; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import javax.servlet.ServletConfig; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public DyListServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置接收信息  集 java.sql.Connection conn = null; Statement db = null; request. CharacterEncoding("UTF-8"); // 接收浏览器端提交 信息 String sort = request.getParameter("sort"); // 设置输出信息 格式及集 response. ContentType("text/xml; char=UTF-8"); response. Header("Cache-Control", "no-cache"); // 创建输出流对象 Pr Writer out = response.getWriter; // 依据验证结果输出区别 数据信息 out.pr ln(" <response>"); ResultSet rs; String strSql = null; try { Class.forName("com.mysql.jdbc.Driver"); conn = DriverManager .getConnection( "jdbc:mysql://localhost/test?useUnicode=true&characterEncoding=gbk", "root", "123456"); } catch (SQLException ex) { .out.prln(ex.getMessage + "路径"); } catch (ClassNotFoundException ex) { .out.prln(ex.getMessage + "驱动"); } try { strSql = "select product.name,product.id from sort,product where sort.id=product.sortid and sort.name='" + sort + "'"; db = conn.createStatement ; rs = db.executeQuery(strSql); while (rs.next ) { out.pr ln(" <name>" + rs.getString("name") + " </name>"); } } catch (SQLException e) { e.pr StackTrace; } out.pr ln(" </response>"); out.close ; } } 首先我们访问listdataservlet加载顶级菜单 数据了！在后面用http://localhost:8080/TestMysql/listdataservlet访问testmysql是你工程名然后就可以了！呵呵说到最重要事就是后台数据库结构本人觉没有这个话前面全部都没意义了！两张表 sort表 字段 id name varchar product表 字段 id name varchar sortid 最近感受好多了 最近学设计摸式学了将进两个月今天晚上感觉看非常爽了好象懂了些但是不知道如何用语言表达不出来了想写些设计摸式感受了但是总觉自己不知道如何说如何写了总是觉没什么可写了！呵呵真感觉最近进步还是有尤其是看了设计模式好东西了不管他能不能做事但是做为个 员如果连这个都没学习那他不是个合格员了呵呵希望最近写几篇有关设计摸式文章啊加油啊！
2
相关文章读者评论发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
