基于Struts2与jQuery实现JSON传输的下拉菜单二级联动

Struts2与jQuery实现JSON传输的二级联动方案

本方案旨在利用Struts2框架与Ajax技术进行JSON对象的传输，从而在前端页面实现菜单的二级联动效果。

以下是前端JavaScript文件的完整源代码：

 
var mail={
//初始化
init:{
//初始化数据
initdata:{
did:'',
ttitle:'',
sendpassword:'',
description:''
}, 
//初始化事件
initevent:{
DataEvent:function(){
jQuery("#did").unbind("change");//获取一级菜单，绑定事件
jQuery("#did").bind("change",function(){
//alert(jQuery(this).val());
mail.init.initdata.did=jQuery(this).val();
//alert(mail.init.initdata.did);
mail.init.initevent.getuser();
}); 
}, 
<span style="color:#ff0000;">getuser:function(){
jQuery.post("mailAction_showUsers?did="+mail.init.initdata.did,null,function(data){
var uidoption=jQuery("#uid") ;//获取二级菜单
uidoption.empty();//将列表清空
for(var i=0;i<data.users.length;i++){
//向里面填充option，通过循环
uidoption.append("<option value="+data.users[i].uid+ " >"+data.users[i].username+"</option>" );
} 
});
}, 
submitCheck:function(){
jQuery("#send").unbind("click");
jQuery("#send").bind("click",function(){
mail.init.initdata.description=jQuery("input[type='textarea']").text();
mail.init.initdata.sendpassword=jQuery("input[name='sendpassword']").val();
mail.init.initdata.ttitle=jQuery("input[name='ttitle']").val();
if(mail.init.initdata.sendpassword==""){
alert("请输入密码!");
return false;
} 
}else if(mail.init.initdata.ttitle==""){
alert("请输入主题！");
return false ;
} 
}else if(mail.init.initdata.description==""){
alert("请输入内容！");
return false;
} 
}else
return true;
}); 
} 
} 
} 
} 
jQuery().ready(function(){
mail.init.initevent.DataEvent();
mail.init.initevent.submitCheck();
}); 

后台Action与Struts.xml配置

以下是后台Action类的代码：

 
private int did;
public String getDid(){
... 
} 
public void setDid(String did){
... 
} 
public String showUsers(){
users=(ArrayList<User>)this.userService.getUsersByDid(did);
System.out.println(users.size()+"...");
return SUCCESS;
} 

Struts.xml配置文件如下：

 
<package name="users" namespace="/" extends="json-default">
<action name="mailAction_showUsers" method="showUsers" class="mailAction">
<result type="json"></result>
</action>
</package>

前端JSP页面实现

前端JSP页面代码示例：

 
<td width="65px">接收人</td>
<td> <s:select list="departmentlist" listKey="did" listValue="dname" id="did" name="did"></s:select>
<s:select list="users" listKey="uid" listValue="username" id="uid" name="uid"></s:select>
</td>

以下是实现后的运行效果截图：

本文旨在为有类似需求的开发者提供参考。