Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 482|回复: 0

[AJAX学习]简单的ajax动态级联菜单

[复制链接]
  • TA的每日心情
    开心
    2021-3-12 23:18
  • 签到天数: 2 天

    [LV.1]初来乍到

    发表于 2014-10-13 05:54:11 | 显示全部楼层 |阅读模式
    1. 一、处理请求的JSP文件 menujsp.jsp
    2. <%@ page contentType="text/html; charset=GBK" %>
    3. <%
    4. //接收浏览器端提交的信息
    5. String sort=request.getParameter("sort");
    6.   String contents1="";
    7.   String contents2="";
    8. if(sort.equals("IBM")){
    9.   contents1="IBM笔记本1";
    10.   contents2="IBM笔记本1";
    11.   }else if(sort.equals("SONY")){
    12.   contents1="SONY笔记本1";
    13.   contents2="SONY笔记本2";
    14.   }
    15.   //传回响应数据
    16.   response.setContentType("text/xml; charset=UTF-8");
    17.   response.setHeader("Cache-Control", "no-cache");
    18.   out.println("<response>");
    19.   out.println("<res>" + contents1 + "</res>");
    20.   out.println("<res>" + contents2 + "</res>");
    21.   out.println("</response>");
    22.   out.close();   %>
    复制代码

      
    二、发送请求的:menu.HTML

    <head>
    <META http-equiv=Content-Type content="text/html; charset=gb2312">
    <LINK href="images/css.css" type=text/css rel=stylesheet>
    </head> <script language="javascript">
    1. var XMLHttpReq;
    2.         var currentSort;
    3.         //创建XMLHttpRequest对象      
    4.     function createXMLHttpRequest() {
    5.                 if(window.XMLHttpRequest) { //Mozilla 浏览器
    6.                         XMLHttpReq = new XMLHttpRequest();
    7.                 }
    8.                 else if (window.ActiveXObject) { // IE浏览器
    9.                         try {
    10.                                 XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
    11.                         } catch (e) {
    12.                                 try {
    13.                                         XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    14.                                 } catch (e) {}
    15.                         }
    16.                 }
    17.         }
    18.         //发送请求函数
    19.         function sendRequest(url) {
    20.                 createXMLHttpRequest();
    21.                 XMLHttpReq.open("GET", url, true);
    22.                 XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
    23.                 XMLHttpReq.send(null);  // 发送请求
    24.         }
    25.         // 处理返回信息函数
    26.     function processResponse() {
    27.             if (XMLHttpReq.readyState == 4) { // 判断对象状态
    28.                 if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
    29.                                 updateMenu();
    30.                     } else { //页面不正常
    31.                               alert("您所请求的页面有异常。");
    32.                     }
    33.         }
    34.     }
    35.         //更新菜单函数
    36.         function updateMenu() {
    37.             var res=XMLHttpReq.responseXML.getElementsByTagName("res")
    38.             var subMenu = "";
    39.             for(var i = 0; i < res.length; i++) {
    40.                 subMenu = subMenu + "  " + res[i].firstChild.data + "
    41. ";
    42.             }
    43.                 currentSort.innerHTML = subMenu;
    44.         }
    45.         // 创建级联菜单函数
    46.         function showSubMenu(obj) {
    47.                 currentSort =document.getElementById(obj);
    48.                 currentSort.parentNode.style.display = "";
    49.                 sendRequest("menujsp.jsp?sort=" + obj);
    50.         }
    复制代码
    </script> <table style="BORDER-COLLAPSE: collapse" borderColor=#111111
    cellSpacing=0 cellPadding=0 width=200 bgColor=#f5efe7 border=0>

    <TR>
       <TD align=middle bgColor=#dbc2b0 height=19><B>笔记本品牌</B> </TD>
    </TR>
    <tr>
       <td height="20"> <a onClick="showSubMenu("IBM")">IBM</a> </td>
    </tr>
    <tr style="display:none">
        <td height="20" id="IBM"> </td>
    </tr>
    <tr>
       <td height="20"> <a onClick="showSubMenu("SONY")">SONY</a> </td>
    </tr>
    <tr style="display:none ">
       <td id="SONY" height="20"> </td>
    </tr>
    </table>
      

      
      
       
       

         
       

         
       
      



    源码下载:http://file.javaxxz.com/2014/10/13/055411187.zip
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-6-15 16:37 , Processed in 0.386804 second(s), 46 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表