`

struts2+json+jquery 二级联动 例子

    博客分类:
  • ajax
阅读更多

 struts2.1.X 版本中已经把ajax 主题移到了dojo-plugin 插件中,用法也有所改变,据网上评论struts2 中的ajax 主题效率有点低,不建议使用,在项目中刚好要使用,记录下。。 

 说明下 <#list> 是FreeMarker 的循环标签,项目中用到了FreeMarker  不过在这不影响理解。

 

在加option 节点的时候有几个问题:

现象一,用方法objSelect.appendChild(objOpiton)给select添加option时,添加有出现列表项,但是显示空白,IE下的现象。        

 现象二,用objSelect.add(objOpiton)添加option,FF下不支持。

 

这里也有几种方法介绍:

createElement(name) 方法可创建元素节点。此方法可返回一个 Element 对象。
参数name 字符串值,这个字符串可为此元素节点规定名称。如果 name 参数中含有不合法的字符,该方法将
抛出代码为 INVALID_CHARACTER_ERR 的 DOMException 异常。
appendChild(newchild) 方法可向节点的子节点列表的末尾添加新的子节点。
Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而 Mozilla 不会这样做。
例子:
// 生成一下拉框
var new_select = document.createElement('SELECT');
new_select.onchange = function() { itemtree_cats_change(this); };
// 生成选取项
1) 用createElement方法
var opt = document.createElement('OPTION');
new_select.appendChild(opt);
2) 用 new 的方法
new_select.options[new_select.options.length] = new Option('', '');
在iE7下, 第一种方法可以成功,没什么意外,在ie6和firefox下,不行,没有option出现在select中
在ie7,ie6,firefox下, 第二种方法都能正常显示.

 

 

input.jsp

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jeecms-main</title>
<script type="text/javascript" src="../banner/js/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(getsort);
function getsort(){
	var pid=$("#bpid").val();
	var time=new Date();
	$.ajax({
		cache:false,
		url:'ajax_findSort.action',
		type:'post',
		dataType:'json',
		data:{pid:pid,t:time},
		success:update_c
	});
}
function update_c(json){
	var sort=json.sort;
	var cbanner=json.cbanner;
	var s_root=document.getElementById('bannerid');
	s_root.options.length=0;
	for(var i in sort){
		var option = document.createElement("option");
		var value=sort[i].id;	
		var text=sort[i].name;
			option.text=text;
			option.value=value;
			s_root.options[s_root.options.length] =option;
	}

}
</script>
</head>
<body>
当前位置 添加文章
<@s.form action="article_addArticle.action">

文章栏目:<select id="bpid" name="bpid" onchange="getsort()" >
	<#list Request.pbanner as p>
		<option value="${p.id}">${p.name}</option>
	</#list>
</select>
栏目分类:<select id="bannerid" name="bannerid"/>
</body>
</html>

 

 

AjaxAction.java

在getXxx()方法前使用@JSON(name="XXX") 注解可以重命名json传输的名,

官方的说法是:如果有些属性不希望被json 串行化,可以在属性前加 transient 修饰符,或者不要加get 方法,都可以达到此目的。

 但在我的测试中,带了transient 修饰符 但还是被串行化了,这个不知道是不是bug 。。

package action;

import java.util.HashSet;
import java.util.Iterator;
import java.util.List;
import java.util.Set;

import action.bean.SortBean;

import entity.Banner;

import service.BannerService;

public class AjaxAction {
	private BannerService bannerService;
	private transient int pid;
	
	private Set sort;
	
	public String findSort(){
		Banner banner=bannerService.findBanner(pid);
		sort=new HashSet();
		if(banner!=null){
			if(banner.getBanners()!=null&&banner.getBanners().size()!=0){
				Set s=banner.getBanners();
				Iterator it=s.iterator();
				while(it.hasNext()){
					Banner c=(Banner)it.next();
					SortBean sb=new SortBean();
					sb.setId(c.getId());
					sb.setName(c.getName());
					sort.add(sb);
				}
			}
		}
		
		return "success";
	}
		
	public void setBannerService(BannerService bannerService) {
		this.bannerService = bannerService;
	}

	public Set getSort() {
		return sort;
	}

	public void setSort(Set sort) {
		this.sort = sort;
	}

	public int getPid() {
		return pid;
	}

	public void setPid(int pid) {
		this.pid = pid;
	}

}

 

 

struts.xml

 

	<package name="aticle_ajax" extends="json-default" >
		<action name="ajax_*" class="ajaxAction" method="{1}">
			<result type="json"></result>
		</action>
	</package>

 

 

官方json-plugin 网站:http://cwiki.apache.org/S2PLUGINS/json-plugin.html

另json 数据格式可参照本博客其他文章。

分享到:
评论

相关推荐

    联动(struts2+json+jquey)

    struts2+json_jquery实现联动.struts2的标签doubleselect无法实现第二级有数据.只好改为json来接收对象实现

    Struts2+hibernate3+JQuery+ajax+json三级联动

    自己查资料做出来的小东西,虽然简单,但是能很好的诠释Struts2、Hibernate、jquery、ajax和json的最基本的用法

    SSH+Ajax+JSON省市级联效果Spring+Struts+Hibernate+Jquery

    Spring+Struts+Hibernate+Jquery(AJAX)实现的省份与城市级联效果 原理:通过ajax调用后端struts的action,将返回的JSON对象数组解析载入页面。

    struts2 jquery json ajax 三级联动菜单

    struts2 jquery json ajax 三级联动菜单 可直接部署使用 需添加数据库查询代码

    Struts2JQueryJson

    学习时做的一个struts2框架下前台页面获取后台json格式的数据,list,map等。页面包含多级联动页面,登陆验证页面,获取后台map,list格式的json格式数据的页面。分享给大家学习。

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

    jquey配合josn实现两级网页菜单代码,二级的菜单联动特效,Author : TongFei  格式可更改为横行 也行 只需修改样式即可,url:菜单数据josn文件路径

    SSH+jQuery+Ajax框架做的地区选择

    用struts2 hibernate spring三大框架,再加上jQuery + json + Ajax技术做的地区选择,从数据库中读取地区信息,显示在网页上的三级联动下拉列表上。

    jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动

    利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: 代码如下: var mail={ //初始化 init:{ //初始化数据 initdata:{ did:”, ttitle:”, sendpassword:”, description:” }, /...

    城市级联之三级联动

    该项目为一个整合hibernate与struts,利用json对象存放临时数据库数据,连接数据的三级联动;改项目使用ajax传递请求连接和参数;数据库结果为三表级联,三表之间依次都是多对一的关系;其中代码核心代码都附有详细...

    网页struts城市联动

    用ajax获得json数据实现城市联动,后台使用struts+hibernate

    SYPRO示例项目源码和EasyUI入门视频教程

    sshe示例程序(struts2+spring3+hibernate4+easyui)(Maven构建) easyui1.2.6整站文件.zip jquery1.7.2中文API修正版.chm jquery.easyui-1.2.5源码未压缩版.rar jquery-easyui-1.2.6.zip JQuery-esqyUI中文-1.2.5API....

Global site tag (gtag.js) - Google Analytics