本文是要做一个二级联动，动态的。通过jquery返回json类型的数据，然后在jsp页面处理，生成第二级下拉列表菜单。
所需js库： jquery.js,json2.js
jar包:json-lib-2.2.3-jdk15.jar,ezmorph-1.0.6.jar
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
jQuery(function($){
var obj=$("#category");
if(typeof obj != 'undefined' && obj !=''){
showGongdanType(obj.val());
}
});
function onchangeShow(category){
jQuery.ajax({
url : "${contextPath}/assets/statistic/ajaxGetType.do",
data : {statCategory : category}, // 传递参数
type : "post",
cache : false,
dataType : "json",
success:onchangecallback
});
}
function onchangecallback(data){
document.all['type'].options.length = 0;
var str="<option value=''>全部</option>";
for(var i=0;i<data.length;i++){
str+="<option value='"+data[i].value+"'>"+data[i].valueName+"</option>"
}
$("#type").html(str);
}
function showGongdanType(category){
jQuery.ajax({
url : "${contextPath}/assets/statistic/ajaxGetType.do",
data : {statCategory : category},
type : "post",
cache : false,
dataType : "json",
success:callback
});
}
function callback(data){
document.all['type'].options.length = 0;
var str="<option value=''>全部</option>";
for(var i=0;i<data.length;i++){
str+="<option value='"+data[i].value+"'>"+data[i].valueName+"</option>"
}
$("#type").html(str);
// 下面代码是为了第二级下拉列表的定位。因为非struts2的标签，无法自己定位
if("${gongdanType}"!=''){
for(var i=0;i<data.length;i++){
if(data[i].value=="${gongdanType}")
document.all['type'].selectedIndex=i+1;
}
}
}
</script>
<td width="10%" height="25" class="alignLeft">
统计类别：
</td>
<td width="10%" valign="top" class="alignLeft">
<s:select name="form.category" list="categorys" id="category"
listKey="value" listValue="valueName"
onchange="onchangeShow(this.value)">
</s:select>
</td>
<td width="10%" height="25" class="alignLeft">
工单类型：
</td>
<td width="10%" valign="top" class="alignLeft">
<select name="form.gongdanType" id="type" >
</select></td>
上面写了两个请求的函数，代码一样，只不过在第一级下拉列表onchange时，第二级下拉列表要定位在第一个值“全部”。
action
public class GongdanTypeStatAction extends ActionSupport implements Preparable {
/** 统计类别：URL传参，默认统计类别是'CB' */
private String type;
/** 统计类别:(<s:select>标签list ) */
private List<Param> categorys;
/** 工单类型(第二级的数据) */
private List<Param> gongdanTypes;
/** ajax 传递的参数 统计类别 */
private String statCategory;
public void prepare() throws Exception {
type = ServletActionContext.getRequest().getParameter("type");
categorys = new ArrayList<Param>();
Param param1 = new Param();
param1.setValue("CB");
param1.setValueName("业务变更");
Param param2 = new Param();
param2.setValue("APP");
param2.setValueName("资源申请");
categorys.add(param1);
categorys.add(param2);
}
// 得到业务变更和资源申请下的变更类别
public void ajaxGetType() throws Exception {
// 工单类型
if("CB".equals(statCategory)){
gongdanTypes = new ArrayList<Param>();
for(EChangeBusinessCategory ec:EChangeBusinessCategory.values()){
Param param = new Param();
param.setValue(ec.getKey());
param.setValueName(ec.getLable());
gongdanTypes.add(param);
}
}else if("APP".equals(statCategory)){
gongdanTypes = new ArrayList<Param>();
for (EApplyType et : EApplyType.values()) {
Param param = new Param();
param.setValue(et.getKey());
param.setValueName(et.getName());
gongdanTypes.add(param);
}
}
JSONArray jsonObj = JSONArray.fromObject(gongdanTypes);
sendMsg(jsonObj.toString()); //发送JSON格式的字符串回JS端
}
public void sendMsg(String content) throws IOException{
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.getWriter().write(content);
}
}
Param.java
/**
* 功能概述：<br>
* 存储同一个类型的参数（类型名，类型值，和一条参数列表）
*/
public class Param {
private Object entity;
/** 参数的值 参数的业务唯一字段值 */
private String value;
/** 参数的名称. 参数的显示出来的 */
private String valueName;
public Param() {
}
/**
* @param value
* @param valueName
*/
public Param(String value, String valueName) {
this.value = value;
this.valueName = valueName;
}
/**
* @return the value
*/
public String getValue() {
return value;
}
/**
* @param value
* the value to set
*/
public void setValue(String value) {
this.value = value;
}
/**
* @return the valueName
*/
public String getValueName() {
return valueName;
}
/**
* @param valueName
* the valueName to set
*/
public void setValueName(String valueName) {
this.valueName = valueName;
}
/**
* @return Returns the entity.
*/
public Object getEntity() {
return entity;
}
/**
* @param entity
* The entity to set.
*/
public void setEntity(Object entity) {
this.entity = entity;
}
}
两个枚举类型
EChangeBusinessCategory.java
EApplyType.java
public enum EChangeBusinessCategory {
// 系统安装
SYSTEM_SETUP("SYS", "系统安装"),
// 监控需求
MONITOR_DEMAND("MONI", "监控需求"),
// 机柜需求
CABINETS_DEMAND("CABI", "机柜需求"),
// 撤销存储
STORAGE_DEMAND("STOR","撤销存储"),
// 网络需求
NETWORK_DEMAND("NET", "网络需求");
private String key;
private String lable;
EChangeBusinessCategory(String key, String value) {
this.key = key;
this.lable = value;
}
/**
* 将字符串转化为枚举值
*
* @param key
* @return
*/
public static EChangeBusinessCategory getEnumType(String key) {
EChangeBusinessCategory[] values = EChangeBusinessCategory.values();
for (int i = 0; i < values.length; i++) {
EChangeBusinessCategory eInfo = values[i];
if (eInfo.getKey().equals(key)) {
return eInfo;
}
}
return null;
}
/**
* @return Returns the lable.
*/
public String getLable() {
return lable;
}
/**
* @return Returns the key.
*/
public String getKey() {
return key;
}
}
public enum EApplyType {
SERV("SERV", "服务器"),
CABI("CABI", "机柜"),
IP("IP", "IP"),
STOR("STOR", "存储");
private String key;
private String name;
/**
* @param key
* @param name
*/
EApplyType(String key, String name) {
this.key = key;
this.name = name;
}
/**
* @return Returns the key.
*/
public String getKey() {
return key;
}
/**
* @return Returns the name.
*/
public String getName() {
return name;
}
/**
* @param roleId
* @return
*/
public static EApplyType getEnumType(String key) {
EApplyType[] values = EApplyType.values();
for (int i = 0; i < values.length; i++) {
EApplyType eInfo = values[i];
if (eInfo.getKey().equals(key)) {
return eInfo;
}
}
return null;
}
}
action配置
<action name="ajaxGetType" class="GongdanTypeStatAction"
method="ajaxGetType">
</action>
分享到：
相关推荐
今天小编就为大家分享一篇jQuery中ajax请求后台返回json数据并渲染HTML的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于jquery+json的通用三级联动下拉列表 基于jquery+json的通用三级联动下拉列表
jquery做的二级联动下拉列表，很有用的
jquery 通用三级联动下拉列表 , 用Jquery实现的三级联动下拉列表插件，压缩包内有多个不同的版本，其实现的基本原理大同小异，无非是调用方式的不同，第一个是通过读取XML构建，支持IE/firefox，chrome不支持，XML...
struts2下通过jquery的ajax从后台传json对象并展示在web页面上的一个小例子，所需的jar包请自己下载否则无法运行，所需的包包括struts的必须包，json的支持包和struts对json的支持包
Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON
JQuery发送Ajax请求Struts2，并返回JSON的例子。该例子对应 http://blog.csdn.net/littleqiang520中的博文
用jquery、ajax读取json数据实现select列表的三级联动(下拉列表三级联动)
一个简单的demo,实现了struts2+jquery执行ajax异步请求并返回json类型数据的实例，代码中附有注释，简单易懂。 基于eclipse开发，导入到eclipse即可运行。
一个jquery+json 数据传递的 实例工程，代码注释详细，很适合 初学者，这是我帮老弟打的，希望可以帮到其他人
Struts2 与Jquery Ajax的json数据交换的典型范例
struts2+json_jquery实现联动.struts2的标签doubleselect无法实现第二级有数据.只好改为json来接收对象实现
struts2 jquery json ajax 三级联动菜单 可直接部署使用 需添加数据库查询代码
基于jquery+json的通用四级联动下拉列表.zip
jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动...
一个用jQuery+struts2完成的省市联动
jQuery+ASP+SQL实现二级联动下拉菜单 全国省市数据库可以从网上Down个合适的导入一下就可以了. /**************************** * Author:蓝客密探 * Blog:www.lanke.me * Forum:www.phpdn.cn 详细介绍页面：...
jQuery世界城市三级联动下拉选择代码 jQuery世界城市三级联动下拉选择代码 jQuery世界城市三级联动下拉选择代码
通过jQuery获取表单数据，封装到JSON对象，再把JSON对象转为字符串传到Action，接到数据后，再把JSON字符串变为JSON对象，通过JSON的键，取出数据，通过调用数据库返回数据封装在JSON，打印出数据，然后在客户端接收...