jsp从数据库获取数据填充下拉框实现二级联动菜单的方法
本文实例讲述了jsp从数据库获取数据填充下拉框实现二级联动菜单的方法。分享给大家供大家参考,具体如下: 项目告一段落,现在将遇到的比较实用的东西记录下来,写了多遍了,谨记于此,以备查看! 1、首先在数据库中获取第一个下拉框的数据: <s:select listKey=tsFrom id=t_tsfrom cssClass=required listValue=tsFrom cssStyle=width:90 list=tsfrom1 name=tsFrom theme=simple headerKey= onchange=getTsFromDescrib 在开发Web应用时,我们经常需要实现交互性强的用户界面,比如二级联动菜单。这种功能在JSP(Java Server Pages)中可以通过与数据库交互来动态填充下拉框,并结合JavaScript和Ajax技术实现。本文将详细讲解如何使用JSP从数据库获取数据来填充下拉框,进而实现二级联动菜单。 我们需要在JSP页面中创建第一个下拉框,用于展示一级菜单。这个下拉框的数据是从数据库中获取的。例如: ```jsp <s:select listKey="tsFrom" id="t_tsfrom" cssClass="required" listValue="tsFrom" cssStyle="width:90" list="tsfrom1" name="tsFrom" theme="simple" headerKey="" onchange="getTsFromDescribe(this);" headerValue="--请选择--" /> ``` 这里的`<s:select>`标签是Struts2框架提供的,用于生成HTML select元素。`list`属性指定的是后台传入的列表数据,`onchange`事件触发时会调用`getTsFromDescribe`函数,实现二级菜单的动态加载。 在后台,我们通常会使用Service层和DAO层来处理数据。Service层调用DAO层的方法获取数据库中的数据。例如,DAO层可能有一个`getTsFrom()`方法,用于查询一级菜单的数据: ```java public List<CustomManage> getTsFrom() { return this.find("SELECT distinct new CustomManage(tsFrom,'2') FROM CustomManage C WHERE C.tsFrom IS NOT NULL ORDER BY tsFrom ASC"); } ``` 这里的SQL语句使用了`distinct`关键字去重,同时使用`new`关键字构建一个新的`CustomManage`对象,因为Oracle数据库在Java代码中去重时需要这种方式。在实体类`CustomManage`中,我们需要为这些字段提供构造方法,以便正确地设置属性值: ```java public CustomManage(String khname, int s) { this.khname = khname; } public CustomManage(String cpname, String type) { if ("1".equals(type)) { this.cpname = cpname; } else if ("2".equals(type)) { this.tsFrom = cpname; } else if ("3".equals(type)) { this.khname = cpname; } } ``` 当用户选择一级菜单后,前端会触发Ajax请求,获取二级菜单的数据。在JSP中,我们可以这样定义`getTsFromDescribe`函数: ```javascript function getTsFromDescribe(ts_describe) { var tsfrom = $("#t_tsfrom").val(); Ext.Ajax.request({ url: '${ctx}/complaints/complaints!getTsFrom.action', params: { tsfrom: tsfrom // 通过JSON形式将前台获取的值传递给后台 }, success: function(response) { var json = Ext.util.JSON.decode(response.responseText); if (json.success) { var data = json.cmList; if ("" == data) { alert("请选择投诉类型"); inputForm.t_tsfrom.focus(); $("#ts_tsFrom").empty(); // 每次需要将上一次的数据进行清空 } else { $("#ts_tsFrom").empty(); // 对获取到的数据进行迭代 for (var i = 0; i < data.length; i++) { var id = data[i]; var name = data[i]; $("#ts_tsFrom").append($("<option></option>").attr("value", id).text(name)); } } } } }); } ``` 这个函数使用了ExtJS的Ajax请求,向服务器发送一个包含当前一级菜单值的请求。成功返回后,根据返回的JSON数据(`cmList`是列表数据),动态创建并添加二级菜单的`<option>`元素。 总结来说,实现JSP中从数据库获取数据填充下拉框并实现二级联动菜单,主要涉及以下几个步骤: 1. 在JSP页面上创建下拉框,设置onChange事件。 2. 后台Service和DAO层处理数据,获取并处理一级菜单数据。 3. 实体类提供构造方法,确保数据正确映射。 4. 使用Ajax监听onChange事件,向服务器发送请求获取二级菜单数据。 5. 前端接收到响应后,动态创建二级菜单的选项。 这个过程结合了JSP、Struts2、JavaScript和Ajax,实现了用户交互性强的二级联动菜单功能,提高了用户体验。















- 粉丝: 3
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 代码生成技术:Delphi模板引擎自动输出CRUD接口层代码.pdf
- linux常用命令大全.md
- 代码重构艺术:DelphiIDE工具链迁移设计模式.pdf
- 代码重构艺术:DelphiIDE工具链迁移遗留系统到分层架构.pdf
- 代码重构艺术:DelphiIDE工具链迁移老旧系统最佳实践.pdf
- 单元测试进阶:DUnitX框架模拟对象与覆盖率统计实战.pdf
- 单元测试进阶:DelphiDUnitX数据驱动测试与覆盖率分析.pdf
- 代码重构艺术:DelphiIDE重构工具链与设计模式迁移.pdf
- 地理围栏算法:Delphi计算GPS轨迹与多边形区域的快速相交检测.pdf
- C语言实现字符串替换功能代码
- 单元循环引用破解:接口隔离与依赖注入实战.pdf
- 地理信息系统:Delphi调用MapboxGLJS的跨平台方案.pdf
- 地理信息系统Delphi开发:MapBoxSDK集成与热力图生成.pdf
- 地理信息系统:Delphi跨平台地图渲染与GPS轨迹分析.pdf
- 地理信息系统:OpenLayers地图控件嵌入与坐标转换.pdf
- linux常用命令大全.md



评论0