`

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是一个基于MVC(Model-View-Controller)设计模式的Java Web框架,它简化了开发过程,提供了强大的控制...

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

    总的来说,这个“三级联动”项目展示了如何利用Struts2进行请求处理,Hibernate进行数据操作,JQuery实现前端交互,Ajax进行异步通信,以及Json进行数据交换。这是一个典型的Web应用开发实例,对于理解和掌握这些...

    struts2+json省市区级联显示

    Struts2是一个强大的Java web应用程序框架,它基于MVC(Model-View-Controller)设计模式,主要用于构建企业级的Web应用程序。JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,它允许数据以键值对...

    Struts2+jQuery+ajax+mySql实现省市二级联动

    总的来说,结合Struts2、jQuery、ajax和MySQL,我们可以实现高效、流畅的省市二级联动效果,提供用户友好的Web界面。这四个技术的协同工作展示了现代Web开发中前后端交互的基本模式,对于任何想要学习Web开发的人来...

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

    SSH+Ajax+JSON在Web开发中的应用主要集中在构建动态、响应迅速的用户界面,这里我们主要探讨Spring、Struts、Hibernate这三大框架如何与Ajax和JSON技术结合,以实现省市级联选择的效果。 首先,Spring是Java企业级...

    web小项目:省市区三级联动(struts2+json)

    总的来说,这个"web小项目:省市区三级联动(struts2+json)"是一个典型的前后端交互案例,展示了如何利用Struts2处理业务逻辑,通过JSON进行数据交换,以及JavaScript如何动态更新页面内容,实现用户友好的交互体验...

    省市级联(采用技术==Struts+Hibernate+Spring+Jquery+Json)

    标题 "省市级联(采用技术==Struts+Hibernate+Spring+Jquery+Json)" 描述了一个基于Web的开发项目,该项目使用了多种技术来实现省市级联的动态下拉选择功能。在这个系统中,用户在选择省份后,城市列表会根据所选...

    ajax,struts2,json实现省市区三级联动源码含全国省市区数据库

    “ajax,struts2,json实现省市区三级联动源码含全国省市区数据库”这一标题揭示了这个压缩包包含的是一项使用AJAX、Struts2和JSON技术来实现的省市区三级联动功能的源代码。这项技术常用于web应用中,允许用户在选择...

    ssh+jquery+ajax二级联动

    在这个"ssh+jquery+ajax二级联动"项目中,开发者可能创建了一个简单的Web应用,实现了基于Ajax的二级联动选择功能。这通常在多级下拉菜单或地区选择等场景中常见,例如:省份选择后,城市列表会动态加载更新。 1. *...

    struts2 jquery json ajax 三级联动菜单

    比如,当用户在第一级菜单中做出选择后,通过Ajax调用Struts2的Action,Action返回JSON格式的数据,这些数据随后被jQuery解析并用来填充第二级菜单。 JSON(JavaScript Object Notation)是一种轻量级的数据交换...

    jQuery + struts2 专业类别、专业名称 二级联动列表

    在这个场景中,"jQuery + struts2 专业类别、专业名称 二级联动列表"是一个典型的前后端交互应用,它允许用户通过选择一级分类(专业类别)来动态加载二级分类(专业名称)。这种功能常见于教育、招聘等网站,帮助...

    Struts2 JQueryJson例子 .rar

    - 可能的场景包括表格数据的异步加载、表单验证、动态下拉联动等,这些功能都可以通过Struts2 Action处理业务逻辑,然后使用JQuery+JSON进行前端展示和交互。 在这个压缩包的实例中,可能包含了一个简单的登录或...

    struts+js,struts+jquery示例

    5. 整合jQuery与Struts的AJAX功能,使用Ajax-Struts2插件返回JSON或XML响应。 6. 实现交互式Web应用,如AJAX分页、下拉联动、实时搜索等。 理解并掌握这些知识点,开发者可以创建高效、响应式的Web应用,提升用户...

    Struts2JQueryJson

    例如,多级联动页面可能利用JQuery的AJAX功能异步加载数据,用户在选择一级分类后,二级分类会动态更新,这种交互增强了用户体验。 对于登陆验证页面,通常会有一个表单提交用户凭据,Struts2可以通过Action类接收...

    ajax使用jquery json实现的省市县三级联动经验总结

    通过Ajax结合jQuery和JSON,可以有效地实现省、市、县三级联动功能,不仅提升了用户体验,也优化了前后端数据交互过程。在实际项目中,开发者可以根据具体需求调整代码逻辑,如增加错误处理、优化数据展示等,进一步...

    省市联动jquery+struts2

    标题中的“省市联动jQuery+Struts2”是指在Web开发中使用jQuery库和Struts2框架实现的一个功能,即当用户选择一个省份时,相关的城市会动态地在下拉列表中加载出来,提供用户选择。这个功能在很多需要收集用户地址...

    三级联动的实例+struts2+hibernate3

    在IT行业中,"三级联动...这个实例通过整合Struts2的控制层和Hibernate3的数据访问层,实现了高效、灵活的三级联动效果。理解并掌握这一实例,对于提升Java Web开发技能,尤其是处理动态交互和数据绑定,具有重要意义。

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

    本教程将探讨如何使用jQuery和JSON来实现一个二级联动菜单特效,由TongFei作者提供。这种技术允许我们创建动态、响应式的菜单,增强用户体验。 首先,我们需要理解jQuery和JSON的基础知识。jQuery是一个流行的...

    ajax+json实现多级联动菜单

    **需求分析**:假设我们需要在一个电商网站上实现商品分类的多级联动菜单,即当用户选择一级分类时,相应的二级分类自动更新显示。 ##### 2. **设计思路**: - 客户端通过点击事件触发Ajax请求。 - 服务器端根据...

    struts2 ajax实现的二级联动

    在Struts2框架中,我们可以利用Ajax来实现二级联动效果,即在一个下拉框的选择改变时,通过Ajax请求动态地更新另一个下拉框的内容。 首先,我们需要了解Struts2的Action类,它是处理用户请求的核心。在实现二级联动...

Global site tag (gtag.js) - Google Analytics