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的
分享到:
相关推荐
在网页设计和开发中,Ajax(Asynchronous JavaScript and XML)技术是一种非常...理解并掌握Ajax实现省市联动效果,对于前端开发者来说是必备的技能之一,它不仅提升了用户体验,也是现代Web开发中不可或缺的一部分。
通过分析这些文件,开发者可以理解整个系统的架构,学习如何结合Ajax和JavaScript实现动态加载的无限级联动效果。在实际应用中,还需要考虑性能优化,例如使用缓存、分页加载等策略,以减少服务器压力和提高用户体验...
这种效果可以通过Ajax实现,每级下拉框的选项改变时,都触发一个Ajax请求,获取并填充下一级别的选项。 三、实现步骤 1. 创建HTML结构:首先,我们需要创建包含多个select元素的HTML结构,每个select代表一个级别。...
本项目"纯js实现ajax无刷新三级联动"旨在利用JavaScript和Ajax技术,无需页面整体刷新即可实现多级选择联动效果,这种效果常见于下拉菜单的联动筛选中。在描述中提到,此项目使用了JSON格式进行数据交换,这有助于...
3. 使用HTML和JavaScript(可能结合jQuery)创建并管理前端的下拉框,利用AJAX实现联动效果。 4. 优化前端和后端的代码,确保响应速度快且用户体验良好。 在实际项目中,可能还需要考虑其他因素,如错误处理、数据...
在AJAX无限级联动菜单中,当用户选择一个菜单项时,JavaScript会向服务器发送请求,获取该菜单项的子级菜单数据,然后动态地在页面上生成新的菜单,实现联动效果。由于数据交换是局部的,所以提高了用户体验,降低了...
本例"ajax实现日期联动"将深入讲解如何利用AJAX来实现两个日期选择器之间的联动效果,即当用户在一个日期选择器中选取日期时,另一个日期选择器会根据预设逻辑自动更新其可选日期范围。 一、AJAX的基本流程 1. **...
8. **用户体验**:通过Ajax实现的三级联动,用户可以在不刷新页面的情况下完成所有选择,降低了操作复杂度,提升了使用体验。 9. **测试与调试**:在项目完成后,需要进行功能测试和性能测试,确保所有级别的联动都...
在网页开发中,二级联动效果通常用于实现如省市区选择、类别分类等场景,它能够为用户提供更加直观和便捷的交互体验。本示例主要关注如何利用AjaxPro.dll组件来实现这种效果。AjaxPro是一个ASP.NET下的AJAX库,它...
6. 更新DOM:解析后的数据用于更新DOM树,实现联动效果。可以使用`document.getElementById()`或`document.querySelector()`等方法找到对应的DOM元素,然后用`innerHTML`或`textContent`属性修改其内容。 在省市...
本话题主要关注如何使用AJAX实现一个省级到市级的联动效果,这在很多需要动态选择地区信息的场景中非常常见,如地址填写、物流查询等。下面我们将详细探讨这一技术及其在Java Web环境中的应用。 首先,我们需要了解...
在本资源"Ajax四级联动源代码"中,我们探讨的是一种利用Ajax实现的城市选择的四级联动效果,这在很多网站的地址输入、筛选功能中常见。四级联动通常指的是省-市-区-街道的逐级下拉菜单,用户选择一个层级后,下一...
本文将深入探讨如何利用Java后端技术和Ajax前端技术实现数据库的实时联动效果。 首先,让我们理解Java和Ajax的基本概念。Java是一种广泛使用的面向对象的编程语言,尤其在服务器端开发中占据主导地位。它提供了丰富...
在这个例子中,我们将探讨如何在 ASP.NET 平台上,利用 Ajax 实现一个三级联动的效果,该效果通常用于地区选择、商品分类等场景,以提高用户界面的交互性和用户体验。 在 Visual Studio 2003 中,虽然已经有些过时...
本示例中,“jquery ajax xml 实现select联动”指的是利用jQuery的Ajax功能从XML文件中获取数据,动态更新HTML中的元素,实现两个或多个下拉列表之间的联动效果。这种功能在多级分类选择、地区选择等场景中十分常见...
在Web开发中,"Ajax JavaWeb JS 三级联动"是一个常见的功能需求,它涉及...总之,"Ajax JavaWeb JS 三级联动"是一个集成了前端、后端和异步通信技术的复杂功能,通过合理的分工协作,可以实现高效、流畅的Web交互体验。
接着,更新HTML的下拉框或者列表,填充从服务器获取的城市信息,实现二级联动的效果。 在实际应用中,为了提高用户体验,我们还需要考虑一些优化措施。例如,首次加载页面时,可以预先加载一级省份数据,当用户选择...
这种联动效果提升了用户体验,减少了不必要的页面刷新。实现这一功能的核心技术是JavaScript的Ajax(异步JavaScript和XML)以及JSON(JavaScript Object Notation)数据格式。 Ajax是Web2.0技术的重要组成部分,它...
这种联动效果提高了数据输入的效率,也使得页面更加直观。 JS是Web开发中的客户端脚本语言,它可以在用户的浏览器上运行,处理DOM(文档对象模型)元素,执行用户交互,以及向服务器发送请求。在这个例子中,JS负责...
在Struts2框架中,我们可以利用Ajax来实现二级联动效果,即在一个下拉框的选择改变时,通过Ajax请求动态地更新另一个下拉框的内容。 首先,我们需要了解Struts2的Action类,它是处理用户请求的核心。在实现二级联动...