首页 »Javascript教程 » ajax二级联动:ajax 2级联动菜单 »正文ajax二级联动:ajax 2级联动菜单来源: 发布时间:星期六, 2009年3月28日 浏览:36次 评论: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.readyState4){ (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.prStackTrace;} } } 这里我没用bean来实现数据库取数据功能而是直接在servlet里面实现了这些功能代码可能太混乱了敬请原谅但是我希望大家能够直接拿过去用了!所以有些优化事情我没去做了以后要努力了! DyListServlet代码如下: package org.servlet; import java.io.IOException; import java.io.PrWriter; 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"); // 创建输出流对象 PrWriter out = response.getWriter; // 依据验证结果输出区别数据信息 out.prln(" <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.prln(" <name>" + rs.getString("name") + " </name>"); } } catch (SQLException e) { e.prStackTrace; } out.prln(" </response>"); out.close; } } 首先我们访问listdataservlet加载顶级菜单数据了!在后面用http://localhost:8080/TestMysql/listdataservlet访问testmysql是你工程名然后就可以了!呵呵说到最重要事就是后台数据库结构本人觉没有这个话前面全部都没意义了!两张表 sort表 字段 id name varchar product表 字段 id name varchar sortid 最近感受好多了最近学设计摸式学了将进两个月今天晚上感觉看非常爽了好象懂了些但是不知道如何用语言表达不出来了想写些设计摸式感受了但是总觉自己不知道如何说如何写了总是觉没什么可写了!呵呵真感觉最近进步还是有尤其是看了设计模式好东西了不管他能不能做事但是做为个员如果连这个都没学习那他不是个合格员了呵呵希望最近写几篇有关设计摸式文章啊加油啊! 1
相关文章读者评论发表评论 |
|