struts2+json+ajax 二级联动和json数据的页面展示

     最近要使用struts2+json+ajax完成二级联动菜单，在网上查了相关文章，相比servlet，使用struts2需要做一些修改，页面遍历未找到适合自己的，写测试项目做了简单总结。

     1.spring配置文件，声明dao类和action类。

<!-- dao -->
<bean id="getBC" class="dao.GetBC"></bean>
<!-- action -->
<bean id="checkBookCode" class="action.CheckBookcode" scope="prototype">
<property name="gbc" ref="getBC"></property>
</bean>

2.struts2配置文件

<package name="action" extends="json-default" namespace="/d">
<action name="checkBookCode" class="checkBookCode" method="returnLujv">
<result  type="json">
<param name="root">result</param>
</result>
</action>
<action name="checkBookcodeByLujv" class="checkBookCode" method="checkBookCodeByLujv">
<result type='json'>
<param name="root">result</param>
</result>
</action>
</package>

注意：

1.struts2中包的extends改为“json-default”用以接收json数据

2.action中设置result 的tpye=“json”

  3.param中name=“root”可以不写，result为action中返回的json变量的变量名。

3.action代码

//获得第一级菜单数据。Map<String,String>

//参数：dbName（指定从哪个库中查询）

        //gbc为dao类

public String returnLujv() {

city = gbc.getCity(dbName);

//使用Gson的toJson方法将city转换为json数据
result=new Gson().toJson(city);
return "success";
}

//action获得第二级菜单数据。Map<String,Map<String,String>>

//参数：dbName（指定从哪个库中查询），lujv（第一级菜单的当前值）

//gbc为dao类。
public String checkBookCodeByLujv()  throws IOException {

//使用Gson的toJson方法将返回Map转换为json数据
result=new Gson().toJson(gbc.getBookCodeByLujv(lujv, dbName));
System.out.println(result);
return "success";
}

注意：

                1.这里只需声明result，和之前struts配置文件中的result要一致。

js代码：

      <script type="text/javascript">
$(function() {

//页面加载后生成一级菜单
$.ajax({
url : "${pageContext.request.contextPath}/d/checkBookCode",
type : "get",
dataType : "json",

//从起始页面获得dbName参数并传给checkBookCode，获得方式<s:property value="dbName"/>
data : {
dbName : '<s:property value="dbName"/>'
},
success : function(data) {

//用eval转化返回的json数据
var obj = eval("(" + data + ")");

                       //遍历json数据，增加option显示value，传值key。
for ( var key in obj) {
$("<option>").html(obj[key]).val(key).appendTo($("#lujv"));
}

//主动调用一级菜单的change()方法，由当前值生成二级菜单
$("#lujv").change();
}
});

//一级菜单的change()方法
$("#lujv")
.change(
function() {
$("#bookCode").empty();
$
.ajax({
url:"${pageContext.request.contextPath}/d/checkBookcodeByLujv",
type : "get",
dataType : "json",
data : {
lujv : this.value,
dbName : '<s:property value="dbName"/>'
},
success : function(data) {
var obj = eval("(" + data + ")");
for ( var key in obj) {
$("<option>").html(
key + "" + obj[key])
.val(key).appendTo(
$("#bookCode"));
}
}
});
})
})
</script>

注意：

1.遍历方式

        2.也可用.get/post方法

页面代码：

<form action="/verifyData/d/verifyAction" method="get" id="form">
<div class="input-append">

<!--一级菜单-->
<select name="lujv" id="lujv" class="span2" style="font-size:20px; height:30;">
</select> 

<!--二级菜单-->
<select name="bookCode" id='bookCode' class="span2" style="font-size:20px; height:30;">
</select> 
<button class="btn" type="submit" id="confirm">确定</button>
</div>
</form>