jsp页面的代码：
<%@ page contentType="text/html; charset=gbk"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/json.js"></script>
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
out.println(basePath);
%>
<script type="text/javascript">
jQuery(function($){
//alert("ok");
});
function onchangeShow(oneId){
$.ajax({
url : "<%=basePath%>cateJson.whbs",
data : {parentId : oneId}, // 参数
type : "post",
cache : false,
dataType : "json", //返回json数据
error: function(){
alert('error');
},
success:onchangecallback
});
}
function onchangecallback(data){
document.all['twoId'].options.length = 0; //清空原有的option
var str="";
for(var i=0;i<data.length;i++){
str+="<option value='"+data[i].recordId+"'>"+data[i].title+"</option>"
}
$("#twoId").html(str);
}
</script>
<html>
<body>
<div align="center">
请选择部门类型
<s:select list="rfones" listKey="recordId" listValue="title" name="oneId" theme="simple" id="oneId" value="oneID" onchange="onchangeShow(this.value)"></s:select>
请选择文件类型
<s:select list="rftwos" listKey="recordId" listValue="title" name="twoId" theme="simple" id="twoId" value="twoID"></s:select>
</div>
</body>
</html>
struts中action的代码
/**
* des:取得二级联动菜单
* autho:exceljava
* date:Nov 20, 2009
* @return
* @throws IOException
*/
public String getJsonCategory() throws IOException{
rfjsons=archiveService.getCategoryByParentID(parentId);//这里从数据库取得数据
net.sf.json.JSONArray jsonObj=net.sf.json.JSONArray.fromObject(rfjsons);//组装成json数据
sendMessage(jsonObj.toString());//向视图push json数据
return null;
}
/**
* des:封装发送json格式的数据回js
* autho:exceljava
* date:Nov 20, 2009
* @param content
* @throws IOException
*/
public void sendMessage(String content) throws IOException{
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.getWriter().write(content);
}
分享到：
相关推荐
在这个场景中，我们讨论的是使用jQuery库来实现JSON格式数据的二级级联下拉菜单。这种功能常见于多级分类选择、地区选择等，它可以提供更流畅、更直观的用户体验。 jQuery是一个轻量级、高性能的JavaScript库，它...
总之，通过结合Java Web技术和数据库，我们可以实现动态的二级级联下拉菜单，为用户提供直观且易于操作的界面。这个过程涉及到数据库设计、后端服务开发以及前端交互等多个环节，对提升开发者综合能力非常有帮助。
在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...
综上所述，实现Java和JSP中的二级级联菜单涉及数据库设计、后端处理、前端展示等多个方面，需要理解MVC架构、Java与数据库交互、JSP标签库的使用以及前端基本的HTML和CSS知识。通过熟练掌握这些技能，你可以构建出...
本主题将深入探讨如何使用jQuery解析JSON数据并实现级联菜单，这在构建动态和交互性强的用户界面时非常常见。级联菜单通常用于导航，其中下拉选项根据上一个选项的选择而变化，提供更具体的子类别。 首先，让我们...
在本文中，我们将深入探讨如何使用JSP、JSON和MySQL来实现一个二级级联下拉菜单。这个功能常用于网站的表单设计中，让用户能够从相关联的分类中选择选项，例如省份与城市的选择。 首先，让我们了解这三个技术的核心...
本主题聚焦于“Jquery实现ajax二级级联查询”，这是一个常见的前端交互设计，常见于下拉菜单联动，例如省份选择后自动更新城市选择。在这个场景中，我们通常会利用服务器端（如JSP或Servlet）动态生成XML文件，因为...
"4级级联菜单JQUERY+JSON版"是一个利用JavaScript库jQuery和数据格式JSON实现的多级联动菜单的示例。这个项目主要展示了如何在现代浏览器（如Chrome、Firefox、Opera以及IE11）中创建一个可扩展且功能丰富的四级菜单...
网上找了很久这种菜单,浪费了很多时间，实在没办法，只好老老实实去官网上按说明弄了一个，并更新了，jquery1.5.2, 希望给有需要的朋友可以节约一点时间，欢迎交流,qq:170262
4. **数据处理**：服务器响应后，使用jQuery处理并渲染城市数据到二级菜单。 5. **级联效果**：重复以上步骤，为二级菜单添加事件监听，获取区县数据并显示。 6. **优化体验**：可能还包括错误处理、异步加载提示、...
6. **jQuery动态更新**：前端接收到响应后，使用jQuery更新二级菜单，展示子级区域（如城市）。 文件名"街道.jpg"和"区县.jpg"可能代表示例中的图像资源，用于美化界面或指示特定区域。"Menu"可能是包含JavaScript...
本项目“jquery仿京东二级级联菜单导航”旨在实现一个类似京东商城的下拉二级菜单，利用jQuery库来增强用户体验。这个功能通常用于大型网站，尤其是电商网站，因为它们通常具有多级分类，通过级联菜单可以有效地展示...
本示例中的"jQuery ajax JSON 下拉列表框级联"就是这样的一个应用。 1. **jQuery**：jQuery是一个高效、简洁且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本案例中，jQuery用于...
"json城市三级级联"是指利用JSON数据来实现省、市、县（区）的三级联动效果。在网页中，用户选择一个省份时，下拉菜单会自动更新为该省下的所有城市，接着选择城市后，再次更新显示该城市下的所有县或区。这种功能在...
3. `area.js`：这可能是主要的业务逻辑文件，其中包含了获取和处理省市区数据的代码，以及使用jQuery实现级联下拉菜单的逻辑。它可能通过Ajax从服务器获取数据，或者直接使用本地的`area.json`和`area_nocounty.json...
二级级联菜单意味着主菜单有一个子菜单，而三级级联菜单则在二级的基础上再增加一级子菜单。例如，一个网站的导航栏可能有"产品"这个主菜单，点击后展开显示"电子产品"、"家居用品"等二级子菜单，进一步点击"电子...
级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单...
4. **服务器端处理**：JSP接收到请求后，执行SQL查询，根据父ID获取二级菜单数据，然后以JSON或其他格式返回。 5. **客户端处理响应**：AJAX回调函数接收到服务器返回的数据后，更新DOM，动态插入二级菜单选项。 6...
在三级级联菜单的实现中，Servlet可能作为业务逻辑的处理中心，接收AJAX请求，进行必要的数据库操作，构建JSON数据，然后返回给客户端。 实现步骤如下： 1. **HTML/CSS**：首先，我们需要创建一个基本的HTML结构，...
在使用JSP JavaScript过程中有很多的技巧与实现，那么如何构建二级级联下拉菜单呢，本文将会向你做一个源码上的介绍。