最近参照网上的例子，做了个级联菜单。学习一下ajax
参照的列子为：
JavaDB+JSP+AJAX实现的级联下拉菜单
他那个为英文的，我改为能处理中文的级联菜单。
我在想能不能在一个页面实现呢？
新手，请多交流
源码如下：
index.jsp
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="gb2312"%>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
<script language="javascript">
var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
updateMenu();
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
//更新菜单函数
function updateMenu() {
var res=XMLHttpReq.responseXML.getElementsByTagName("res")
/**下面是用innerHTML输出控件内容的一般用法
* var subMenu = "";
* for(var i = 0; i < res.length; i++) {
* subMenu = subMenu + " " + res[i].firstChild.data + "";
* }
* currentSort.innerHTML = subMenu;
**/
var list = document.all.list;
list.options.length=0;
list.add(new Option("---请选择---",""));
for(var i=0;i<res.length;i++){
list.add(new Option(res[i].firstChild.data,res[i].firstChild.data));
}
}
// 创建级联菜单函数
function showSubMenu(obj) {
sendRequest("menu.jsp?sort=" + obj );
/**下面这一句的作用是：每次选择后回到第一个选项**/
// document.all.mli.options[0].selected=true;
}
</script>
</head>
<body>
<select onchange="showSubMenu(this.options[this.options.selectedIndex].value)" name="select1">
//下面由于数据库结构不一样，我直接写上的，也可以从数据库中取出
<option value=''>---请选择---</option>
<option value='古遗址'>古遗址</option>
<option value='古墓葬'>古墓葬</option>
<option value='古建筑'>古建筑</option>
<option value='石窟寺及石刻'>石窟寺及石刻</option>
<option value='近现代重要史迹及代表性建筑'>近现代重要史迹及代表性建筑</option>
</select>
<select name="list" onchange="if(this.selectedIndex)alert('您选择的是：'+this.options[this.options.selectedIndex].value)">
<option name="">---请选择---</option>
</select>
</body>
</html>
menu.jsp:
<%@ page contentType="text/html; charset=GB2312" import="java.util.*,java.sql.*" %>
<%
String sort=new String(request.getParameter("sort").getBytes("iso-8859-1"),"GB2312");
System.out.print("sort="+sort);
String dbDriver = "com.microsoft.jdbc.sqlserver.SQLServerDriver"; //连接sql数据库的方法
String url = "jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=test";
String userName = "数据库用户名";
String password = "数据库密码";
Connection conn = null;
Statement st = null;
ResultSet rs = null;
List lists = new ArrayList();
try{
Class.forName(dbDriver);
} catch(java.lang.ClassNotFoundException e) {
e.printStackTrace();
}
try {
conn = DriverManager.getConnection(url,userName,password);
st=conn.createStatement();
rs=st.executeQuery("SELECT 要选择的字段 FROM 表名 where 条件='"+sort+"'");
while (rs.next())
{
lists.add(rs.getString(1));
}
rs.close();
st.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
response.setContentType("text/xml; charset=gb2312");
response.setHeader("Cache-Control", "no-cache");
//必须要写下面这一行，不然取出的XML长度为0
response.getWriter().write("<?xml version=\"1.0\" encoding=\"gb2312\"?>");
out.println("<response>");
for(int i=0;i<lists.size();i++)
{
out.println("<res>" + lists.get(i).toString() + "</res>");
}
out.println("</response>");
%>
分享到：
相关推荐
在这个案例中，我们探讨如何运用AJAX、JSP和Servlet技术来实现一个三级级联菜单。 **AJAX (Asynchronous JavaScript and XML)** 是一种在不刷新整个网页的情况下，与服务器交换数据并更新部分网页的技术。它通过...
在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...
在网页开发中，级联菜单（Cascading ...总的来说，js+jsp标签实现页面级联菜单是一种常用且高效的方法，尤其适用于大型、结构复杂的网站。通过对数据的处理和DOM操作，我们可以创建出符合用户需求的交互式菜单系统。
在IT行业中，级联菜单（Cascading Menu）是一种常见的用户界面元素，它允许用户通过多级选择来筛选或导航到特定的信息。在本案例中，我们关注的是如何使用Java和Ajax技术来实现一个二级联动的菜单。Ajax，即...
在这个“jsp + servlet 级联菜单”项目中，我们将探讨如何利用这两者来创建交互式的级联（或下拉）菜单，这对于网页用户界面设计尤为重要，特别是对于具有多层次结构的数据展示。 1. **JSP简介** JSP是Java平台上...
本项目"struts+hibernate+ajax级联菜单"结合了这三者，旨在实现一种交互性更强的前端菜单功能。 首先，Struts是一个基于MVC（Model-View-Controller）设计模式的Java Web框架，它主要用于控制应用程序的流程，处理...
在IT领域，构建动态、交互性强的Web应用是常见的需求，而"JSP+AJAX+MYSQL实现二级级联菜单"就是一个典型的实例。这个技术组合主要用于创建能够实时更新且具有前后端交互功能的Web界面，使得用户在选择一级菜单时，...
【Ajax级联菜单】是一种常见的前端交互设计，它利用了Asynchronous JavaScript and XML（异步JavaScript和XML）技术，能够实现在用户选择某一项时，无需刷新整个页面就能动态加载和展示相关数据。在本例子中，我们有...
在Java和JSP（JavaServer Pages）开发中，二级级联菜单是一种常见的用户界面元素，通常用于导航或数据选择，特别是在具有层次结构的数据中。它允许用户首先选择一个父类别，然后显示与所选父类别相关的子类别。这种...
本文将详细介绍如何使用Ajax技术实现一个动态级联菜单功能，并通过具体的代码示例来展示整个过程。 #### 二、需求分析与设计思路 ##### 2.1 需求分析 本项目的目标是创建一个动态级联菜单，用户选择一级菜单后，二...
【JSP Ajax省市县Select级联菜单】是一个典型的前端与后端交互的示例，它在Web应用中常用于实现动态、无刷新的选择区域（省、市、县）功能。这个压缩包包含了一个完整的解决方案，使得用户在选择省份时，对应的市区...
JavaDB+JSP+AJAX实现的级联下拉菜单.htm
在IT行业中，级联菜单（Cascading Menu）是一种常见的用户界面元素，它允许用户通过多级选择来筛选或导航到特定的信息。这种菜单结构在网页应用和后台系统中广泛使用，尤其在数据分类繁多时，能有效地组织和展示信息...
本文档将详细介绍如何使用jQuery、Ajax、JSP与Servlet来实现一个简单的二级级联菜单功能。该功能常见于许多Web应用程序中，如用户管理、权限分配等场景。通过这种方式可以有效地组织大量的数据项，提高用户体验。 ...
在IT行业中，级联菜单（Cascading Menu）是一种常见的用户界面元素，它通常用于下拉选择，使得用户能够从一系列相关选项中进行选择。在这个项目中，我们讨论的是使用JSP（JavaServer Pages）和JavaScript来实现一个...
在Struts2中实现级联菜单是一项常见的需求，通常用于构建复杂的下拉选择框，使得用户能够逐级选择相关选项。级联菜单在数据表关联或者层级结构的展示中非常实用，例如地区选择、部门分类等。 首先，我们需要理解...
struts2+jsp+json+javascript实现的三级下拉菜单，没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
【标题】"jsp版AJAX下拉条级联"是一个基于Java Server Pages（JSP）技术，利用AJAX实现的动态下拉菜单级联效果的项目。在网页表单中，这种功能通常用于地理信息的选择，例如省份选择后，城市会自动更新为对应省份的...