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

最新推荐文章于 2021-08-06 14:52:33 发布

原创最新推荐文章于 2021-08-06 14:52:33 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JSP #json #jQuery #JavaScript #Cache #ViewUI

web application 专栏收录该内容

15 篇文章

订阅专栏

博主使用JQUERY实现二级联动菜单时遇到调试难题。通过调整下拉框的value值从中文改为数字（如一二三改为123），解决了参数传递问题，实现了菜单的正常联动。

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

test.jsp文件

Jsp代码

<%@ 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>

<%@ 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代码

<%@ 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);
%>

<%@ 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的时候，就没有问题了。