`
hsys
  • 浏览: 291021 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Ajax 实现联动效果

    博客分类:
  • Ajax
阅读更多

Action函数:

	public void writeAjaxObject(Object data) {
		PrintWriter out = null;
		try {
			out = getResponse().getWriter();
			out.print(data);
			out.flush();			
		} catch (IOException e) {
			e.printStackTrace();
		} finally {
			out.close();
		}
	}

	public String gettrade(){
		List<DataDictionaryItem> trades =  dataDict.getOptions("global","trade",null,"orderno ASC");
		jsonlsunit = new JSONArray(trades);
		writeAjaxObject(jsonlsunit);
		return null;
	}
	
	public String getposition(){
		if (null != trade){
			List<DataDictionaryItem> positions =  dataDict.getOptions("global","trade",trade,"orderno ASC");
			jsonlsunit = new JSONArray(positions);
			writeAjaxObject(jsonlsunit);
		}
		return null;
	}




页面代码:

<select name="specialist.trade" id="trade"  onchange="setPosition(this.options[this.selectedIndex].value);">
</select>

<select name="specialist.position" id="position" ></select>


脚本代码:

	var tradeUrl = "/pub/register!gettrade.hx";	
	var positionUrl = "/pub/register!getposition.hx?trade=";
	
	function setPosition(trade){
		if( trade == null ||trade == ""){
			trade = "0";
		}
		$.getJSON(positionUrl+trade, function(data){
			clearSelect("position");
			$.each(data,function(i,item){
				var position = item.split(",");
				$("#position").append("<option value='"+position[0]+"'>"+position[1]+"</option>");
			});
		});
	}
	function clearSelect(selectId){
		var selectObj = document.getElementById(selectId);
		var len = selectObj.options.length; 
		for (var i=0; i < len; i++){ 
			selectObj.options[0] = null; 
		}
	}
	$(document).ready(
			function setTrade(){
				clearSelect("trade");
				$.getJSON(tradeUrl, function(data){
					$.each(data,function(i,item){
						var trade = item.split(",");
						if(i==0){
							setPosition( trade[0]);
						}
						$("#trade").append("<option value='"+trade[0]+"'>"+trade[1]+"</option>");
					});
				});
			}			
	)
	


当然,还要包括Jquery,我用的是1.3的
分享到:
评论
1 楼 zhu271925992 2010-08-24  
我还比较落伍 我用的 DWR

相关推荐

    Ajax实现省市联动效果

    在网页设计和开发中,Ajax(Asynchronous JavaScript and XML)技术是一种非常...理解并掌握Ajax实现省市联动效果,对于前端开发者来说是必备的技能之一,它不仅提升了用户体验,也是现代Web开发中不可或缺的一部分。

    ajax实现无限级联动

    通过分析这些文件,开发者可以理解整个系统的架构,学习如何结合Ajax和JavaScript实现动态加载的无限级联动效果。在实际应用中,还需要考虑性能优化,例如使用缓存、分页加载等策略,以减少服务器压力和提高用户体验...

    Ajax 无限级 联动下拉框

    这种效果可以通过Ajax实现,每级下拉框的选项改变时,都触发一个Ajax请求,获取并填充下一级别的选项。 三、实现步骤 1. 创建HTML结构:首先,我们需要创建包含多个select元素的HTML结构,每个select代表一个级别。...

    纯js实现ajax无刷新三级联动

    本项目"纯js实现ajax无刷新三级联动"旨在利用JavaScript和Ajax技术,无需页面整体刷新即可实现多级选择联动效果,这种效果常见于下拉菜单的联动筛选中。在描述中提到,此项目使用了JSON格式进行数据交换,这有助于...

    在mvc下采用ajax实现三级城市县级联下拉框

    3. 使用HTML和JavaScript(可能结合jQuery)创建并管理前端的下拉框,利用AJAX实现联动效果。 4. 优化前端和后端的代码,确保响应速度快且用户体验良好。 在实际项目中,可能还需要考虑其他因素,如错误处理、数据...

    AJAX无限级联动菜单

    在AJAX无限级联动菜单中,当用户选择一个菜单项时,JavaScript会向服务器发送请求,获取该菜单项的子级菜单数据,然后动态地在页面上生成新的菜单,实现联动效果。由于数据交换是局部的,所以提高了用户体验,降低了...

    ajax实现日期联动

    本例"ajax实现日期联动"将深入讲解如何利用AJAX来实现两个日期选择器之间的联动效果,即当用户在一个日期选择器中选取日期时,另一个日期选择器会根据预设逻辑自动更新其可选日期范围。 一、AJAX的基本流程 1. **...

    Ajax实现三级联动

    8. **用户体验**:通过Ajax实现的三级联动,用户可以在不刷新页面的情况下完成所有选择,降低了操作复杂度,提升了使用体验。 9. **测试与调试**:在项目完成后,需要进行功能测试和性能测试,确保所有级别的联动都...

    Ajax实现二级联动效果

    在网页开发中,二级联动效果通常用于实现如省市区选择、类别分类等场景,它能够为用户提供更加直观和便捷的交互体验。本示例主要关注如何利用AjaxPro.dll组件来实现这种效果。AjaxPro是一个ASP.NET下的AJAX库,它...

    Ajax实现省市二级联动

    6. 更新DOM:解析后的数据用于更新DOM树,实现联动效果。可以使用`document.getElementById()`或`document.querySelector()`等方法找到对应的DOM元素,然后用`innerHTML`或`textContent`属性修改其内容。 在省市...

    ajax 省级 市级 联动效果 Java

    本话题主要关注如何使用AJAX实现一个省级到市级的联动效果,这在很多需要动态选择地区信息的场景中非常常见,如地址填写、物流查询等。下面我们将详细探讨这一技术及其在Java Web环境中的应用。 首先,我们需要了解...

    Ajax四级联动源代码

    在本资源"Ajax四级联动源代码"中,我们探讨的是一种利用Ajax实现的城市选择的四级联动效果,这在很多网站的地址输入、筛选功能中常见。四级联动通常指的是省-市-区-街道的逐级下拉菜单,用户选择一个层级后,下一...

    java Ajax联动效果

    本文将深入探讨如何利用Java后端技术和Ajax前端技术实现数据库的实时联动效果。 首先,让我们理解Java和Ajax的基本概念。Java是一种广泛使用的面向对象的编程语言,尤其在服务器端开发中占据主导地位。它提供了丰富...

    ajax实现3级联动例子(vs2003带数据库)

    在这个例子中,我们将探讨如何在 ASP.NET 平台上,利用 Ajax 实现一个三级联动的效果,该效果通常用于地区选择、商品分类等场景,以提高用户界面的交互性和用户体验。 在 Visual Studio 2003 中,虽然已经有些过时...

    jquery ajax xml 实现select联动

    本示例中,“jquery ajax xml 实现select联动”指的是利用jQuery的Ajax功能从XML文件中获取数据,动态更新HTML中的元素,实现两个或多个下拉列表之间的联动效果。这种功能在多级分类选择、地区选择等场景中十分常见...

    Ajax JavaWeb JS 三级联动

    在Web开发中,"Ajax JavaWeb JS 三级联动"是一个常见的功能需求,它涉及...总之,"Ajax JavaWeb JS 三级联动"是一个集成了前端、后端和异步通信技术的复杂功能,通过合理的分工协作,可以实现高效、流畅的Web交互体验。

    JavaWeb通过ajax、json实现省市二级联动

    接着,更新HTML的下拉框或者列表,填充从服务器获取的城市信息,实现二级联动的效果。 在实际应用中,为了提高用户体验,我们还需要考虑一些优化措施。例如,首次加载页面时,可以预先加载一级省份数据,当用户选择...

    基于javaweb和ajax的省市联动实现

    这种联动效果提升了用户体验,减少了不必要的页面刷新。实现这一功能的核心技术是JavaScript的Ajax(异步JavaScript和XML)以及JSON(JavaScript Object Notation)数据格式。 Ajax是Web2.0技术的重要组成部分,它...

    js和ajax实现三级联动.zip

    这种联动效果提高了数据输入的效率,也使得页面更加直观。 JS是Web开发中的客户端脚本语言,它可以在用户的浏览器上运行,处理DOM(文档对象模型)元素,执行用户交互,以及向服务器发送请求。在这个例子中,JS负责...

    struts2 ajax实现的二级联动

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

Global site tag (gtag.js) - Google Analytics