houjiannba
- 浏览: 31045 次
- 性别:
- 来自: 沈阳
-
文章分类
最新评论
数据库设计
drop database if exists mydb;
create database mydb character set gbk;
--多级联动菜单
use mydb;
drop table if exists select_menu;
create table select_menu(
id varchar(255) not null default '',
text varchar(255) not null,
pid varchar(255) not null,
seq int(11) not null default 0,
primary key (id)
)ENGINE=InnoDB DEFAULT CHARSET=gbk;
insert into select_menu values('A1','列表A选项1','INIT',1);
insert into select_menu values('A2','列表A选项2','INIT',2);
insert into select_menu values('B11','列表B选项11','A1',1);
insert into select_menu values('B12','列表B选项12','A1',2);
insert into select_menu values('B13','列表B选项13','A1',3);
insert into select_menu values('B21','列表B选项21','A2',1);
insert into select_menu values('B22','列表B选项22','A2',2);
insert into select_menu values('C111','列表C选项111','B11',1);
insert into select_menu values('C112','列表C选项112','B11',2);
insert into select_menu values('C121','列表C选项121','B12',1);
insert into select_menu values('C122','列表C选项122','B12',2);
insert into select_menu values('C131','列表C选项131','B13',1);
insert into select_menu values('C132','列表C选项132','B13',2);
insert into select_menu values('C211','列表C选项211','B21',1);
insert into select_menu values('C212','列表C选项212','B21',2);
insert into select_menu values('C221','列表C选项221','B22',1);
insert into select_menu values('C222','列表C选项222','B22',2)
连接数据库的工具类package com.lanp.ajax.db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
/**
* 连接数据库的工具类,被定义成不可继承且是私有访问
* @author lanp
* @since 2012-2-29 22:27
*/
public final class DBUtils {
private static String url = "jdbc:mysql://localhost:3306/mydb?characterEncoding=gbk";
private static String user = "root";
private static String psw = "root";
private static Connection conn;
static {
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
throw new RuntimeException(e);
}
}
private DBUtils() {
}
/**
* 获取数据库的连接
* @return conn
*/
public static Connection getConnection() {
try {
conn = DriverManager.getConnection(url, user, psw);
} catch (SQLException e) {
e.printStackTrace();
throw new RuntimeException(e);
}
return conn;
}
/**
* 释放资源
* @param conn
* @param pstmt
* @param rs
*/
public static void closeResources(Connection conn,PreparedStatement pstmt,ResultSet rs) {
if(null != rs) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
throw new RuntimeException(e);
} finally {
if(null != pstmt) {
try {
pstmt.close();
} catch (SQLException e) {
e.printStackTrace();
throw new RuntimeException(e);
} finally {
if(null != conn) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
throw new RuntimeException(e);
}
}
}
}
}
}
}
}
select_menu.html页面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>多级联动菜单</title>
<script type="text/javascript">
var xmlHttp; //用于保存XMLHttpRequest对象的全局变量
var targetSelId; //用于保存要更新选项的列表ID
var selArray = new Array(); //用于保存级联菜单ID的数组，《Ajax经典案例开发大全》中没有= new Array()代码
//用于创建XMLHttpRequest对象
function createXmlHttp() {
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//获取列表选项的调用函数
function buildSelect(selectedId,targetId) {
if("" == selectedId) { //selectedId为空串表示选中了默认项
clearSubSel(targetId); //清楚目标列表及下级列表中的值
return; //直接结束调用，不必向服务器请求信息
}
targetSelId = targetId; //将传入的目标列表ID赋值给targetSelId变量
createXmlHttp(); //创建XMLHttpRequest对象
xmlHttp.onreadystatechange = buildSelectCallBack; //设置回调函数
xmlHttp.open("GET", "select_menu.jsp?selectedId="+selectedId, true);
xmlHttp.send(null);
}
//获取列表选项的回调函数
function buildSelectCallBack() {
if(4 == xmlHttp.readyState) {
//将从服务器获得的文本转为对象直接量
var optionsInfo = eval("(" + xmlHttp.responseText + ")");
var targetSelNode = document.getElementById(targetSelId);
clearSubSel(targetSelId);
//遍历对象直接量中的成员
for(var o in optionsInfo) {
//在目标列表追加新的选项
targetSelNode.appendChild(createOption(o,optionsInfo[o]));
}
}
}
//根据传入的value和text创建选项
function createOption(value,text) {
var opt = document.createElement("option"); //创建一个option节点
opt.setAttribute("value", value); //设置value
opt.appendChild(document.createTextNode(text)); //给节点加入文本信息
return opt;
}
//清除传入的列表节点内所有选项
function clearOptions(selNode) {
selNode.options.length = 1;
selNode.options[0].selected = true;
}
//初始化列表数组，《Ajax经典案例开发大全》中该方法的代码是有误没有实现真正的初始化
function initSelArray(selA,selB,selC) {
selArray[0] = selA;
selArray[1] = selB;
selArray[2] = selC;
}
//清除下级子列表选项
function clearSubSel(targetId) {
var len = selArray.length;
for(var i=0;i<len;i++) {
var j = 0;
if(selArray[i] == targetId) {
j = i;
break;
}
}
for(; j<len; j++) {
clearOptions(document.getElementById(selArray[j]));
}
//《Ajax经典案例开发大全》中该方法的代码是有误，不能实现下级列表全部清除功能，且代码冗余，如下示：
//var canClear = false;
//for(var i=0; i<selArray.length; i++) {
// if(selArray[i] == targetId) {
// canClear = true;
// }
// if(canClear) {
// clearOptions(document.getElementById(selArray[i]));
// }
//}
}
</script>
</head>
<!-- 页面加载完毕做2件事：1.初始化列表数组，2.为第一个列表赋值 -->
<body onload="initSelArray('selA','selB','selC');buildSelect('INIT','selA')">
<h1>多级联动菜单</h1>
<table>
<tr>
<td>列表A</td>
<td>
<select name="selA" id="selA" onchange="buildSelect(this.value,'selB')">
<option value="" selected>-------请选择-------</option>
</select>
</td>
</tr>
<tr>
<td>列表B</td>
<td>
<select name="selB" id="selB" onchange="buildSelect(this.value,'selC')">
<option value="" selected>-------请选择-------</option>
</select>
</td>
</tr>
<tr>
<td>列表C</td>
<td>
<select name="selC" id="selC">
<option value="" selected>-------请选择-------</option>
</select>
</td>
</tr>
</table>
</body>
</html>
select_menu.jsp后台服务
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*,com.lanp.ajax.db.DBUtils" %>
<%!
//访问数据库取得下级选项信息
String getOptions(String selectedId) {
int counter = 0;
StringBuffer opts = new StringBuffer("{");
String sql = "select * from select_menu where pid=? order by seq asc";
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
conn = DBUtils.getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setString(1,selectedId);
rs = pstmt.executeQuery();
while(rs.next()) {
//如果不是第一项，追加一个","用于分隔选项
if(counter > 0) {
opts.append(",");
}
opts.append("'");
opts.append(rs.getString("id"));
opts.append("':'");
opts.append(rs.getString("text"));
opts.append("'");
counter++;
}
} catch(SQLException e) {
System.out.println(e.toString());
} finally {
DBUtils.closeResources(conn,pstmt,rs);
}
opts.append("}");
System.out.println(opts.toString());
return opts.toString();
}
%>
<%
out.clear();
String selectedId = request.getParameter("selectedId");
String optionsInfo = getOptions(selectedId);
out.print(optionsInfo);
%>
分享到：
发表评论
相关推荐
【jsp+ajax 三级联动菜单】是一个典型的Web开发技术应用场景，它主要利用JavaServer Pages（JSP）和Asynchronous JavaScript and XML（AJAX）来实现动态网页中的数据交互和页面更新。在这个例子中，我们看到的是一个...
**Ajax 三级联动菜单详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在本项目中，“ajax三级联动菜单”利用Ajax实现了动态的、多级关联的下拉菜单...
本项目是关于使用AJAX实现一个三级联动菜单，这种菜单通常用于地区选择、类别筛选等场景，当用户在一级菜单中选择一项时，二级菜单会动态加载对应的数据，同理，选择二级菜单后，三级菜单也会相应地更新。...
Ajax三级联动菜单是一种常见的前端交互设计，常用于网站的数据筛选或导航，比如在课程选择、商品分类等场景中。在这个项目中，我们看到涉及到“学院”、“专业”和“班级”三张表的关联，这通常意味着用户在选择时，...
基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar
联动菜单在Web开发中是一种常见的交互设计，它通常用于实现数据层级关系的展现和操作，如省份-城市-区县的三级联动选择。本资源包“联动菜单大全”包含了多种类型的联动菜单实现，包括与数据库交互的、使用AJAX技术...
这里的“三级联动”是指在网页中，三个下拉菜单或者选择框之间通过Ajax进行数据同步和更新，用户在一级菜单中选择一个选项后，二级菜单会根据一级的选择自动加载相关数据，同样，选择二级菜单后，三级菜单也会随之...
struts2+jsp+json+javascript实现的三级下拉菜单，没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
综上所述，这个项目展示了如何使用Struts2作为后端控制器，jQuery处理前端交互，Ajax实现异步数据传输，以及JSON作为数据交换格式，共同构建一个功能完善的三级联动菜单。开发者需要对这些技术有深入理解，才能有效...
6. **二级联动**：同理，监听二级菜单的选择事件，发送Ajax请求获取三级菜单数据，更新三级菜单。 7. **错误处理**：在整个过程中，还需要添加适当的错误处理机制，比如请求失败或数据解析错误时的提示。 在实际...
总的来说，利用Ajax实现二级联动菜单是一种常见的前端技术实践，它能够提高用户体验，使网页操作更加流畅。通过深入学习和实践，你将能够灵活运用Ajax解决更多类似的问题，提升你的Web开发技能。
【Ajax四级联动菜单】是一种基于Ajax技术实现的动态下拉菜单功能，通常用于网页上的地区选择，例如国家、省份、城市、区县等。在这个示例中，它使用了Oracle数据库存储四级菜单的数据，并结合JSP（JavaServer Pages...
**Ajax 三级联动详解** 在Web开发中，Ajax（Asynchronous JavaScript and XML）技术被广泛应用于创建动态、交互性强的网页应用。它允许在不刷新整个页面的情况下，通过后台与服务器进行数据交换，提升了用户体验。...
在城市三级联动菜单中，当用户在下拉框中选择一个城市时，我们会触发一个AJAX请求，发送当前选中的城市ID到服务器。 JSP（JavaServer Pages）作为服务器端脚本语言，用于生成动态网页内容。在本案例中，JSP将负责...
三级联动菜单是指在商品分类中，有三个层次的下拉菜单相互关联，当用户在某一层次选择一个选项时，下一层次的菜单会根据前一层次的选择进行更新，显示与之相关的子分类。这种方式有助于减少用户在大量分类中查找商品...
在本项目中，"ASP 实用的ajax二级联动菜单"是一个结合了这两种技术的应用，旨在创建一个响应快速、交互流畅的二级菜单系统。 在ASP中，我们通常会使用VBScript或JScript作为脚本语言来处理服务器端逻辑。在这个案例...
在网页开发中，"ajax三级联动"是一种常见的交互设计，主要应用于下拉菜单或选择框，如城市选择，其中包含省、市、区三个级别。这种功能能够为用户提供流畅的体验，无需每次选择都刷新整个页面，提高了网页的响应速度...
Ajax实现三级目录。点击一级目录显示二级目录，二级目录点击显示三级目录。 可以自行添加多级目录，有详细模板。 Ajax实现三级目录。点击一级目录显示二级目录，二级目录点击显示三级目录。 可以自行添加多级目录，...
在三级联动中，jQuery主要负责监听用户的选择事件，并触发Ajax请求。 接下来是AJAX（异步JavaScript和XML），它允许Web应用在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在三级联动中，每当用户...