`

JSP使用JSON实现二级联动菜单

JSPjsonjQueryJavaScriptCache 
阅读更多

小弟今天使用JQUERY实现二级联动菜单，但是怎么调试都没有成功。
请教高手看看下面的代码，是什么地方出了问题。

test.jsp文件

Jsp代码 复制代码
  1. <%@ page contentType="text/html;charset=gb2312"%>   
  2. <html>   
  3. <title>联动菜单</title>   
  4. <script language="javascript" src="jquery.min.js"></script>   
  5. <script LANGUAGE="JavaScript" >   
  6. $(function(){   
  7.     $("#wc").change(function(){   
  8.         $.getJSON("gylx.jsp",{index:$(this).val()},function(myJSON){   
  9.             var myOptions="";   
  10.             for(var i=0;i<myJSON.length;i++){   
  11.                 myOptions+='<option>'+myJSON.optionValue+'</option>';   
  12.             }    
  13.             $("#gx").html(myOptions);   
  14.         });         
  15.     });   
  16.     $("#wc").change();   
  17. })   
  18. </script>   
  19. <body>   
  20.      <select name="wc" id="wc">   
  21.      <option>一</option>   
  22.      <option>二</option>   
  23.      <option>三</option>   
  24.    </select>   
  25.       <select name="gx" id="gx">   
  26.       </select>   
  27. </body>   
  28. </html>  
<%@ page contentType="text/html;charset=gb2312"%>
<html>
<title>联动菜单</title>
<script language="javascript" src="jquery.min.js"></script>
<script LANGUAGE="JavaScript" >
$(function(){
    $("#wc").change(function(){
        $.getJSON("gylx.jsp",{index:$(this).val()},function(myJSON){
            var myOptions="";
            for(var i=0;i<myJSON.length;i++){
                myOptions+='<option>'+myJSON.optionValue+'</option>';
            } 
            $("#gx").html(myOptions);
        });      
    });
    $("#wc").change();
})
</script>
<body>
     <select name="wc" id="wc">
     <option>一</option>
     <option>二</option>
     <option>三</option>
   </select>
      <select name="gx" id="gx">
      </select>
</body>
</html>



gylx.jsp

Jsp代码 复制代码
  1. <%@ page contentType="text/html;charset=gb2312"%>   
  2. <%   
  3. response.setHeader("no-cache");   
  4. response.addHeader("pragma","no-cache");   
  5.   
  6. String index = new String(request.getParameter("index").getBytes("iso8859-1"),"gb2312");   
  7. String JSON_text ="";   
  8.   
  9. if(index.compareTo("一")==0)   
  10.   JSON_text ="[{optionValue:'一一'},{optionValue:一二}]";   
  11. else if(index.compareTo("二")==0)   
  12.   JSON_text ="[{optionValue:'二一'},{optionValue:二二}]";   
  13. else if(index.compareTo("三")==0)   
  14.   JSON_text ="[{optionValue:'三一'},{optionValue:三二}]";   
  15.   
  16. out.println(JSON_text);   
  17. %>  
<%@ page contentType="text/html;charset=gb2312"%>
<%
response.setHeader("no-cache");
response.addHeader("pragma","no-cache");

String index = new String(request.getParameter("index").getBytes("iso8859-1"),"gb2312");
String JSON_text ="";

if(index.compareTo("一")==0)
  JSON_text ="[{optionValue:'一一'},{optionValue:一二}]";
else if(index.compareTo("二")==0)
  JSON_text ="[{optionValue:'二一'},{optionValue:二二}]";
else if(index.compareTo("三")==0)
  JSON_text ="[{optionValue:'三一'},{optionValue:三二}]";

out.println(JSON_text);
%>

该问题已经关闭: 被自己搞定了。。 因为$(this).val()作为getJSON的参数，不能是中文，在代码中，当下拉框的value值为一二三的时候，就无法传递参数，当为123的时候，就没有问题了。

分享到：
| SPRING中属性SCOPE的意义
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯jsp实现3级联动菜单

    本文将详细解析如何使用纯JSP（JavaServer Pages）技术实现一个3级联动菜单，并探讨相关知识点。 首先，我们要理解什么是3级联动菜单。在网页中，联动菜单通常指的是当用户在一个下拉菜单中选择一个选项时，另一个...

    jsp从数据库获取数据填充下拉框实现二级联动菜单的方法.docx

    ### JSP从数据库获取数据...本文详细介绍了如何使用JSP技术结合数据库查询来实现二级联动菜单的具体步骤。通过这种方式，不仅可以提高用户体验，还可以有效地管理复杂的数据关系。希望本文能为您的项目开发带来帮助。

    jsp+ajax 三级联动菜单

    【jsp+ajax 三级联动菜单】是一个典型的Web开发技术应用场景，它主要利用JavaServer Pages（JSP）和Asynchronous JavaScript and XML（AJAX）来实现动态网页中的数据交互和页面更新。在这个例子中，我们看到的是一个...

    二级联动菜单（jsp mysql）

    在这个“二级联动菜单（jsp mysql）”的实例中，我们将探讨如何使用JavaServer Pages (JSP) 和 MySQL数据库来实现这种功能。 首先，JSP是Java的一种动态网页技术，它允许开发人员在HTML页面中嵌入Java代码，从而...

    ajax+json实现多级联动菜单

    **需求分析**：假设我们需要在一个电商网站上实现商品分类的多级联动菜单，即当用户选择一级分类时，相应的二级分类自动更新显示。 ##### 2. **设计思路**： - 客户端通过点击事件触发Ajax请求。 - 服务器端根据...

    超简单的ajax+jsp实现2级联动！！

    总结来说，这个例子展示了如何使用AJAX和JSP技术实现二级联动效果。通过监听一级选项的变化，发送异步请求获取新的二级数据，然后动态更新二级下拉框，实现了不刷新页面就能实时更新内容的交互体验。这在实际的网页...

    jquery+ajax+jsp+servlet实现二级级联菜单

    ### 使用jQuery、Ajax、JSP与Servlet实现二级级联菜单 #### 一、项目背景与技术栈概述 本文档将详细介绍如何使用jQuery、Ajax、JSP与Servlet来实现一个简单的二级级联菜单功能。该功能常见于许多Web应用程序中，如...

    jsp二级联动

    在IT行业中，"jsp二级联动"是一个常见的网页交互功能，主要应用于下拉菜单或者选择框之间数据的联动更新。这个实例通常涉及到前端的HTML、CSS，以及后端的Java JSP技术，配合数据库来实现动态的数据交互。下面将详细...

    实现jsp页面二级下拉框联动，实时读取数据库数据

    通过以上步骤，我们可以实现一个功能完备的JSP页面二级下拉框联动，同时实时从数据库获取数据。这个过程涉及到前后端的交互、数据库操作、事件监听和DOM操作等多个技术环节，是Web开发中一个典型的实例。理解并掌握...

    js+jsp三级联动 源码

    在IT行业中，"js+jsp三级联动 源码"是一个常见的前端与后端交互的实践案例，主要用于实现用户界面的动态筛选和过滤。这里，我们主要探讨的是使用JavaScript（js）和JavaServer Pages（jsp）来创建一个具有三级联动...

    JSP+Ajax二级联动实例

    在Web开发中，二级联动是一种常见的交互设计，用于实现下拉菜单之间数据的关联和筛选。例如，在一个地区选择的场景中，一级下拉框显示国家，选择国家后，二级下拉框动态加载对应的省份。这种功能可以提高用户体验，...

    jsp从数据库获取数据填充下拉框实现二级联动菜单的方法

    在Web开发过程中，常常需要实现从数据库中获取数据，并动态填充到页面的下拉框中，实现二级联动菜单的功能。这不仅可以提升用户体验，还可以使得页面动态交互更加高效。在JSP（JavaServer Pages）技术中，可以通过...

    ajax实现简单城市三级联动菜单

    城市三级联动菜单是一种常见...总的来说，实现城市三级联动菜单涉及到前端的AJAX交互、后端的数据处理以及合理的数据库设计。通过这个过程，我们可以了解到前后端协同工作的重要性，以及如何通过异步通信提升用户体验。

    jquey配合josn实现两级菜单联动特效.rar

    本教程将探讨如何使用jQuery和JSON来实现一个二级联动菜单特效，由TongFei作者提供。这种技术允许我们创建动态、响应式的菜单，增强用户体验。 首先，我们需要理解jQuery和JSON的基础知识。jQuery是一个流行的...

    Java二级联动

    在IT行业中，二级联动是一种常见的数据交互和展示方式，尤其在网页设计和前端开发中广泛使用。它通常指的是两个或多个下拉菜单之间存在的联动关系，例如在选择省份后，城市下拉菜单会自动更新为对应省份的城市列表，...

    ajax jequry jsp二级联动

    【Ajax jQuery JSP 二级联动】是Web开发中常见的交互技术，主要用于提升用户体验，通过异步数据传输实现在两个下拉菜单之间动态关联的效果。在这个简单的例子中，我们将探讨如何利用Ajax、jQuery库和JSP页面来实现这...

    Ajax二级联动下拉列表框

    ### Ajax 实现二级联动下拉列表框 #### 一、简介 在Web开发中，有时我们需要根据用户在第一个下拉列表中的选择动态地更新第二个下拉列表的内容。这种功能被称为“二级联动”，常用于地址选择（如省份和城市的选择）...

    Java代码实现两级联动

    在提供的压缩包文件"用Java代码实现二级联动"中，可能包含了以下内容： - 一个Java类，实现了处理请求、获取数据和生成JSON响应的功能。 - HTML或JSP文件，包含了前端的界面结构和JavaScript代码，用于发送Ajax请求...

    Jsp数据库二级联动原理

    在JSP中实现二级联动，主要是通过JavaScript和数据库查询来完成的。以下将详细讲解其工作原理。 ### 1. 数据库设计 首先，我们需要一个合理的数据库结构来存储这些数据。以省份和城市为例，可以创建两个表：`...

Magicbox
Global site tag (gtag.js) - Google Analytics