最近参照网上的例子,做了个级联菜单。学习一下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实现3级的级联菜单。ajax是浏览器中的js程序向服务器端发送异步请求,返回的数据为json类型。
包含数据库字段设计、jsp页面代码编写、最后的运行效果
java实现ajax二级联菜单。tools.jsp 兼容创建xmlhttprequest,menu.html前台页面,menu.jsp后台页面。可以直接利用于其他方面
JSP+AJAX+MYSQL实现二级级联菜单
JSP Ajax省市县Select级联菜单,无刷新调用城市数据并显示。
JavaDB+JSP+AJAX实现的级联下拉菜单.htm
一个用ajax级联菜单的例子,二个JSP直接放在tomcat就可以看到效果....
jquery+ajax+jsp+servlet实现二级级联菜单,这是自己在实践中总结的一点小经验,代码从前台JAP到Servlet以及后台数据库设计,测试数据完整的流程,相信有点java基础的同仁们都可以看得明白
struts2+jsp+json+javascript实现的三级下拉菜单,没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
JavaDB+JSP+AJAX实现的级联下拉菜单
JSP+AJAX三级级联及更多级的实现
看了大峡搞的级联菜单,我也班门弄斧一把,嘿嘿,花了一点时间搞了个级联菜单贴上来看看。本例中只要你选择成员分类名称就会自动显示成员名称: 首先在eclipse中建一个项目,名称你自己做主了,这里为Easyjf-menu,...
ajax的级联菜单以前老是不会做,现在的这个demo非常的好,下载下来好好看看吧
AJAX_Servlet级联下拉列表 product.jsp UserServlet.java
1、javascript实现二级联动:运用jsp标签拼写Javascript代码,实现一个二维数组,点击一级栏目时,查询二维数组里,符合一级栏目的value ,放到二级栏目里 2,ajax实现的二级联动:利用Ajax与后台程序实现异步交互...
Asp+Ajax无限级联动下拉框菜单Access版 ASP仿Google输入框提示_自动完成功能 AJAX+ASP多级无限制级联菜单(地市版) ASP下结合AJAX实现输入框提示(自动完成) ASP 树形菜单TreeView 多样式版 jQuery实例_飞飞ajax带...
《JSP+Dreamweaver CS4+CSS+Ajax动态网站开发...7.5 级联菜单 7.6 动态表单 7.7 树状菜单 7.8 应用Ajax框架 第8章 在线统计 第9章 注册与登录模块 第10章 学生信息管理系统 第11章 仓库管理系统 第12章 物流管理系统
一个基于JSP+Ajax实现的三级省市县级联菜单源码例子
使用ajax和servlet实现两级下拉框的动态级联
在开发中常常会遇到菜单的级联操作,比如:国家、城市、乡镇的选择等。当选中某个国家的时候,后面的菜单会把该国家内的城市罗列出来,当选中城市的时候,后面的菜单会把对应的乡镇列出来。 解决这种菜单的级联...