四级联动，级联菜单，Ajax

最新推荐文章于 2021-06-07 14:49:53 发布
最新推荐文章于 2021-06-07 14:49:53 发布
阅读量725 收藏
点赞数
文章标签： ajax xmlhttprequest function string null import
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangdeng111/article/details/6563732
版权

按照别人的改编的

menu.jsp

************************************************************************************************************************************

<%@ page pageEncoding="gb2312"%>
<%@ page contentType="text/html;charset=gb2312"%>
<%
request.setCharacterEncoding("gb2312");
%>
<%@ page import="com.lmy.dao.*"%>
<%@ page import="com.lmy.po.*"%>
<%@ page import="com.hp.hpl.jena.util.iterator.ExtendedIterator"%>
<% 
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
 <head>
  <META http-equiv=Content-Type content="text/html; charset=UTF-8">
  <!--LINK href="images/css.css" type=text/css rel=stylesheet-->
  <title>级联菜单</title>
 </head>
 <%
  SubjectDAO sd = new SubjectDAO();
  ExtendedIterator ei = sd.listAllInv();
 %>
 <body>
<script language="javascript">
 var XMLHttpReq;//这个例子里面只用到一个XMLHttpRequest对象，用于获取服务端返回的XML序列
  //创建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) {}
   }
  }
 }
 //发送area请求函数
 function sendRequestArea(url) {
  createXMLHttpRequest();
  XMLHttpReq.open("GET", url, true);
  XMLHttpReq.onreadystatechange = processResponseArea;//指定area响应函数
  XMLHttpReq.send(null);  // 发送请求
 }
 // 处理area返回信息函数
    function processResponseArea() {
     if (XMLHttpReq.readyState == 4) { // 判断对象状态
         if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
    updateAreaList();
      } else { //页面不正常
         alert("您所请求的页面有异常。");
      }
        }
    }
 //更新area菜单函数
 function updateAreaList() {
     var area = XMLHttpReq.responseXML.getElementsByTagName("area");
     var list = document.all.areaList;
        for(var i=0;i<area.length;i++){
         list.add(new Option(area[i].firstChild.data,'a_'+area[i].firstChild.data));
        }
 }
 
 //发送unit请求函数
 function sendRequestUnit(url) {
  createXMLHttpRequest();
  XMLHttpReq.open("GET", url, true);
  XMLHttpReq.onreadystatechange = processResponseUnit;//指定unit响应函数
  XMLHttpReq.send(null);  // 发送请求
 }
 // 处理unit返回信息函数
    function processResponseUnit() {
     if (XMLHttpReq.readyState == 4) { // 判断对象状态
         if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
    updateUnitList();
      } else { //页面不正常
         alert("您所请求的页面有异常。");
      }
        }
    }
 //更新unit菜单函数
 function updateUnitList() {
        var unit = XMLHttpReq.responseXML.getElementsByTagName("unit");
        var list = document.all.unitList;
        for(var i=0;i<unit.length;i++){
         list.add(new Option(unit[i].firstChild.data,'u_'+unit[i].firstChild.data));
        }
 }
 //发送topic请求函数
 function sendRequestTopic(url) {
  createXMLHttpRequest();
  XMLHttpReq.open("GET", url, true);
  XMLHttpReq.onreadystatechange = processResponseTopic;//指定topic响应函数
  XMLHttpReq.send(null);  // 发送请求
 }
 // 处理topic返回信息函数
    function processResponseTopic() {
     if (XMLHttpReq.readyState == 4) { // 判断对象状态
         if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
    updateTopicList();
      } else { //页面不正常
         alert("您所请求的页面有异常。");
      }
        }
    }
 //更新topic菜单函数
 function updateTopicList() {
        var topic = XMLHttpReq.responseXML.getElementsByTagName("topic");
        var list = document.all.topicList;
        for(var i=0;i<topic.length;i++){
         list.add(new Option(topic[i].firstChild.data,'t_'+topic[i].firstChild.data));
        }
 }
 
 // 创建area级联菜单函数
 function showAreaList(obj) {
  
  clearAreaList();
  clearUnitList();
  clearTopicList();
  sendRequestArea("<%=basePath%>TopicOntologyOperate/menujsp.jsp?subjectName=" + obj);
 }
 // 创建unit级联菜单函数
 function showUnitList(obj) {
  clearUnitList();
  clearTopicList();
  sendRequestUnit("<%=basePath%>TopicOntologyOperate/menujsp.jsp?areaName="+obj);
 }
 // 创建topic级联菜单函数
 function showTopicList(obj) {
  clearTopicList();
  sendRequestTopic("<%=basePath%>TopicOntologyOperate/menujsp.jsp?unitName="+obj);
 }
 
 // 清空area下拉列表
 function clearAreaList()
 {
  var list = document.all.areaList;
  list.options.length=0;
     list.add(new Option("---请选择---",""));
 }
 // 清空unit下拉列表
 function clearUnitList()
 {
  var list = document.all.unitList;
  list.options.length=0;
        list.add(new Option("---请选择---",""));
 }
 // 清空topic下拉列表
 function clearTopicList()
 {
  var list = document.all.topicList;
  list.options.length=0;
        list.add(new Option("---请选择---",""));
 }

</script>
  <select
   οnchange="showAreaList(this.options[this.options.selectedIndex].value)"
   name="subjectList" style="width: 150px">
   <option value=''>
    ---请选择---
   </option>
   <%
   while (ei.hasNext()) {
    String temp = ei.next().toString();
    String res1 = temp.split("#")[1];
   %>
    <option value="<%=res1%>"><%=temp.split("_")[1]%></option>
   <%
   }
   %>
  </select>
  <select name="areaList"
   οnchange="showUnitList(this.options[this.options.selectedIndex].value)"
   style="width: 150px">
   <option name="">
    ---请选择---
   </option>
  </select>
  <select name="unitList"
   οnchange="showTopicList(this.options[this.options.selectedIndex].value)"
   style="width: 150px">
   <option name="">
    ---请选择---
   </option>
  </select>
  <select name="topicList"
   οnchange="if(this.selectedIndex)alert(this.options[this.options.selectedIndex].value)"
   style="width: 150px">
   <option name="">
    ---请选择---
   </option>
  </select>
 </body>
</html>

************************************************************************************************************************************

menujsp.jsp

************************************************************************************************************************************

<%@ page pageEncoding="gb2312"%>
<%@ page contentType="text/html;charset=gb2312"%>
<%request.setCharacterEncoding("gb2312");%>

<%@ page import="java.util.*" %>
<%@ page import="com.lmy.ontology.*" %>
<%@ page import="com.hp.hpl.jena.rdf.model.*"%>
<%
 String subjectName;
 String areaName;
 String unitName;
 String item = "isAPartOf";
 TopicOntologyDAO tod = new TopicOntologyDAO();
 ResIterator resultA = null;    //知识领域结果集
 ResIterator resultU = null;    //知识单元结果集
 ResIterator resultT = null;    //知识点结果集
 //如果传过来的参数是 学科名称 ，则找到此学科下的所有领域
    if(request.getParameter("subjectName") != null){
  subjectName = new String(request.getParameter("subjectName").getBytes("ISO-8859-1"),"GB2312");
  resultA = tod.search(item, subjectName);
 }
 //如果传过来的参数是 知识领域名称 ，则找到此领域下的所有单元
 if(request.getParameter("areaName") != null){ 
     areaName = new String(request.getParameter("areaName").getBytes("ISO-8859-1"),"GB2312");
     resultU = tod.search(item, areaName);
 }
 //如果传过来的参数是 知识单元名称 ，则找到此单元下的所有知识点
 if(request.getParameter("unitName") != null){ 
     unitName = new String(request.getParameter("unitName").getBytes("ISO-8859-1"),"GB2312");
     resultT = tod.search(item, unitName);
 }
 
    
 response.setContentType("text/xml; charset=UTF-8");
 response.setHeader("Cache-Control", "no-cache");
 out.println("<response>");
 if(resultA != null){
  while (resultA.hasNext()) {
   Resource res = resultA.nextResource();
   String areaTitle = tod.getValue(res,"areaTitle");
   out.println("<area>" + areaTitle + "</area>");
  }
 }
 if(resultU != null){
  while (resultU.hasNext()) {
   Resource res1 = resultU.nextResource();
   String unitTitle = tod.getValue(res1,"unitTitle");
   out.println("<unit>" + unitTitle + "</unit>");
  }
 } 
 if(resultT != null){
  while (resultT.hasNext()) {
   Resource res2 = resultT.nextResource();
   String topicName = res2.toString().split("#")[1];
   String topicTitle = tod.getValue(res2,"title");
   out.println("<topic>" + topicTitle + "</topic>");
  }
 } 
 out.println("</response>");
 //out.close();
%>

 

 

yangdeng111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
联动菜单大全(含ajax,无限级联动菜单)
10-23
最近收集了很多联动菜单. 下拉联动菜单,有涉及到数据库的,有ajax的,有无限级ajax联动菜单. ....
通过jsp实现省市区县四级联动菜单
热门推荐
06-29 5万+
【所要达到的效果如下】【代码如下】Area.jsp&lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3
ajax 四级级联菜单（jquery实现）
天将降大任于是人
09-26 1万+
页面：＜html＞＜head＞＜script type=text/javascript src=jquery.js＞＜/script＞＜script type=text/javascript＞//js代码1＜script＞＜body＞＜table＞＜tr＞＜td＞级联菜单＜/td＞＜td＞＜select name=city class=amenu＞＜option value=
四级联动下拉菜单
开裆裤儿的博客
01-04 4035
数据库导出地址数据联动显示下拉菜单 1.先说数据库结构,上图: 结构副id形式,sid是本条数据的id,fid是本条数据的上级数据的sid. 就是把这种级别关系建立在数据库里,之后用起来就简单了. 2.前端代码 html: 市级: 北京 区级: 全部 街道: 全部 社区: 全部
四级联动菜单适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以
12-03
四级联动菜单 适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。 来源：懒人
省市区镇四级联动
05-31
在中国的地理信息系统中，"省市区镇四级联动"是一种常见的数据选择方式，尤其在网站开发、移动应用或者后台管理系统中，用于用户输入地址时提供便捷的选择。这种联动机制基于中国的行政区域划分，包括省份（省级行政...
4级级联菜单JQUERY+JSON版
06-12
"4级级联菜单JQUERY+JSON版"是一个利用JavaScript库jQuery和数据格式JSON实现的多级联动菜单的示例。这个项目主要展示了如何在现代浏览器（如Chrome、Firefox、Opera以及IE11）中创建一个可扩展且功能丰富的四级菜单...
js 移动端 城市四级联动
04-10
"js 移动端 城市四级联动"是一个解决方案，它允许用户通过四级菜单（省、市、区、街道）逐级选择，以实现精确的地理位置定位。这个功能通常基于JavaScript实现，利用Ajax异步获取数据，结合HTML和CSS来展示交互式的...
全国城市四级联动
11-13
在实现四级联动时，jQuery可以提供便利的API来快速实现所需功能，比如使用`.on()`绑定事件，使用`.ajax()`进行异步数据获取等。 4. `initLocation.js`：这个文件可能是初始化整个城市联动功能的脚本。它可能负责...
四层级联动JavaScript代码
09-02
在IT行业中，"四级联动"通常指的是在一个网页交互过程中，四个下拉菜单或者选择框之间通过JavaScript进行联动，即一个选项的选择会影响到下一个选项的显示内容。这种功能常见于地区选择、产品分类等场景，能够帮助...
PHP+MySql+Ajax+Jquery省市地区四级联动
11-04
PHP+MySql+Ajax+Jquery省市地区四级联动
javascript四级级联下拉菜单
10-20
很有用的javascript四级级联下拉菜单，国家-省级-市级-街道地区，可以扩展为无限级联，样式可以自行设计。
四级联动菜单，联动菜单
11-01
联动菜单，四级联动菜单，联动下拉菜单，简单易懂，可自定义任何区域或者行业
使用AjaxPro开发四级无刷新联动下拉框
Fbote
10-12 297
开发环境 VS.NET 2005 C# Oracle AjaxPro 最近忙没时间详细解释，先把通用的源码贴出自己看。 出于对性能的考虑，把省市两级写成JS数组，把县区（镇）两级写在 Oracle 里。通过 JS 触发 C# 去读取数据库，然后将数据回传给 JS ，再绑定显示。 操作 采用更通用的 createElement() 而没有使用 options.add() ...
ajax+js动态创建四级联动菜单
weixin_34293059的博客
11-13 162
自己写了一个用AJAX+JS实现自动创建四级联动（国家，省，城市，区县）菜单的例子，效果如下： 代码如下，希望各位高手点评！ 数据库oracle，用了四张表：国家这张表在访问JSP时自动从数据库里面加载： create table country( co_id number primary key, co_name varchar2(...
html城市四级选择,城市四级联动，js和jquery对ajax的支持结合html,json
weixin_35537635的博客
06-07 186
jdbc工具类public class JdbcUtils {public static BasicDataSource bs=null;static{Properties p = new Properties();try {p.load(JdbcUtils.class.getClassLoader().getResourceAsStream("properties/MysqlConfig.pro...
城市四级联动，js和jquery对ajax的支持结合html,json
weixin_30655219的博客
04-11 146
jdbc工具类 public class JdbcUtils { public static BasicDataSource bs=null; ...
Ajax + Asp实现级联菜单
汗水挥洒，脑力风暴
08-03 635
 在一些时候常常用到一个一级列表框（姑且这么叫）和一个二级列表框（姑且这么叫），二级列表框的选项随一级列表改变而改变，为了完成这个任务，其中一种就是用ajax+asp实现实现，代码如下：一个Ajax 请求文件ajax_func.js放在ajax文件夹里：var http_request = false;function send_request(method,url
JS实现二级、三级、四级联动效果。详细
weixin_47703646的博客
07-09 3064
流程目录 介绍 思路 实现 页面初始化效果 编写JS文件 总结 需要注意的问题 结束 介绍 做页面开发或客户端程序开发，都会碰到几个下拉菜单联动的情况，例如在网上买东西的时候，就会选择收货地址，以及在填写家庭信息的时候，都会用到常见的省，市，区三级联动。 思路 页面加载的时候显示的是默认的初始省市县，通过选择不同的省和市，则该省对应的市和县显示为默认。 当点击省份列表中的某一项，此时触发省份下拉框的onchange事...
基于AJAX实现三级级联下拉菜单
最新发布
05-09
三级级联下拉菜单可以通过AJAX技术实现。具体实现步骤如下： 1. 在HTML页面中创建三个下拉菜单，分别表示三级菜单，每个下拉菜单的选项为空。 2. 给第一个下拉菜单绑定change事件，在该事件处理函数中使用AJAX发送...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值