用户管理的设计--3.jquery的ajax实现二级联动
页面效果
实现步骤
1.引入struts整合json的插件包
2.页面使用jquery的ajax调用二级联动的js
//ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位名称列表
function findJctUnit(o){
//货物所属单位的文本内容
var jct = $(o).find("option:selected").text();
$.post("elecUserAction_findJctUnit.do",{"jctID":jct},function(data,textStatus){
//先删除单位名称的下拉菜单,但是请选择要留下
$("#jctUnitID option").remove();
if(data!=null && data.length>0){
for(var i=0;i<data.length;i++){
var ddlCode = data[i].ddlCode;
var ddlName = data[i].ddlName;
//添加到单位名称的下拉菜单中
var $option = $("<option></option>");
$option.attr("value",ddlCode);
$option.text(ddlName);
$("#jctUnitID").append($option);
}
}
}); }
3.在Action类中定义findJctUnit()方法,这里要将返回的List集合放置到栈顶,struts2将其转换成json数据
/**
* @Name: findJctUnit
* @Description: 使用jquery的ajax完成二级联动,使用所属单位,关联单位名称
* @Parameters: 无
* @Return: 使用struts2的json插件包
*/
public String findJctUnit(){
//1:获取所属单位下的数据项的值(从页面提交的jctID值,不是数据字典中的ddlcode)
String jctID = elecUser.getJctID();
//2:使用该值作为数据类型,查询对应数据字典的值,返回List<ElecSystemDDL>
List<ElecSystemDDL> list = elecSystemDDLService.findSystemDDLListByKeyword(jctID);
//3:将List<ElecSystemDDL>转换成json的数组,将List集合放置到栈顶
ValueUtils.pushValueStack(list);
return "findJctUnit";
}
其中,findSystemDDLListByKeyword(jctID)是在数据字典service中实现的方法,主要根据数据类型名称查询数据字典,返回list集合对象 ValueUtils是一个工具类,pushValueStack方法将list压入到struts2值栈的栈顶
public class ValueUtils { public static void pushValueStack(Object object) {
ServletActionContext.getContext().getValueStack().push(object);
}
}
struts2的插件包会将压入到struts2值栈的list集合中对象所有的属性全部被json化
4.在struts.xml中定义
(1)修改 extends值
修改前
<!-- 系统管理 -->
<package name="system" extends="struts-default" namespace="/system">
修改后
<!-- 系统管理 -->
<package name="system" extends="json-default" namespace="/system">
(2)添加映射
<!-- 如果是List集合,转换成json数组;如果是object对象,转换成json对象 -->
<result name="findJctUnit" type="json"></result>
完成上述步骤以后,即可实现选中所属单位下拉框的值,在单位名称下拉选项中有对应值。
在浏览器页面查看json数据如下:
若想针对某个属性被json化,此时可以修改struts.xml文件:
<!-- 如果是List集合,转换成json数组;如果是object对象,转换成json对象 -->
<result name="findJctUnit" type="json">
<param name="includeProperties">\[\d+\]\.ddlCode,\[\d+\]\.ddlName</param>
</result>
这里使用正则表达式拦截一个或多个ddlCode和ddlName,这样json数据中就只含有ddlCode和ddlName了。
用户管理的设计--3.jquery的ajax实现二级联动的更多相关文章
- 用户管理的设计--4.jquery的ajax实现登录名的校验
页面效果 鼠标失去焦点时,不需要刷新页面进行校验,判断登录名是否重复. 实现步骤 1.引入struts2-json-plugin-2.5.10.1插件包 2.页面使用jquery的ajax实现后台校验 ...
- PHP+ajax实现二级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Spring MVC中Ajax实现二级联动
今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody p ...
- (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类: 前端技术 ...
- 基于jQuery的AJAX实现三级联动菜单
最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...
- 基于 Egg.js 框架的 Node.js 服务构建之用户管理设计
前言 近来公司需要构建一套 EMM(Enterprise Mobility Management)的管理平台,就这种面向企业的应用管理本身需要考虑的需求是十分复杂的,技术层面管理端和服务端构建是架构核 ...
- jquery和Ajax(异步js和XML)的应用
Ajax不是值一种单一的技术,而是有机的利用了一系列的交互式网页应用相关的技术所形成的的结合体.它的出现,解开了无刷新更新网页的新时代,并代替传统的Web方式和通过隐藏的框架来进行异步提交的趋势,是w ...
- 使用jquery.ajax实现省市的二级联动(SSH架构)
首先实现jquery ajax的二级联动 要下载个jquery.js 我在这里就不准备了 自行百度下载 背景介绍:通过部门的ID来查找部门下的所有班级 我实现二级联动的思路是:先查询所有部门 显示在页 ...
- [转]Spring3 MVC + jQuery easyUI 做的ajax版本用户管理
原文地址:http://www.iteye.com/topic/1081739 上周写了篇基于spring3.0.5 mvc 简单用户管理实例 ( http://www.iteye.com/topic ...
随机推荐
- java 柱状图、折线图、饼状图
1.绘制柱状图: //BarChartTool工具类代码 package GUIview; import HibernateTool.HibernateTools; import ProductCla ...
- GUI JFrame窗体介绍:
GUI JFrame窗体介绍: https://www.cnblogs.com/-ksz/p/3422074.html
- spring boot app
一个demo 可以参考一下 AppConfig @Configuration @ComponentScan(basePackages = { "org.whm.test" }) ...
- JTAG与JLink说明
JTAG接口解读 通常所说的JTAG大致分两类,一类用于测试芯片的电气特性,检测芯片是否有问题:一类用于Debug:一般支持JTAG的CPU内都包含了这两个模块. 一个含有JTAG Debug接口模块 ...
- POJ-1128-Frame Stacking
链接:https://vjudge.net/problem/POJ-1128 题意: 每张图片上面画了一些边框,给出这些边框叠在一起后的图片,图片边框一定是由一个字母表示并且每条边至少三个字符,输入保 ...
- day33 GIL锁 线程队列 线程池
1. 全局解释器锁GIL Python代码的执行由Python虚拟机(也叫解释器主循环)来控制.Python在设计之初就考虑到要在主循环中,同时只有一个线程在执行.虽然 Python 解释器中可 ...
- buildKibanaServerUrl
private String buildKibanaServerUrl(DiscountIndexMailData mailData,Statistic stat,String failureCaus ...
- python__画图表可参考(转自:寒小阳 逻辑回归应用之Kaggle泰坦尼克之灾)
出处:http://blog.csdn.net/han_xiaoyang/article/details/49797143 2.背景 2.1 关于Kaggle 我是Kaggle地址,翻我牌子 亲,逼格 ...
- grep常用选项记录
grep: 一.常用选项: -i 不区分大小写针对单个字符 -v 显示不包括查找字符的所有行 -o 只打印出匹配到的字符 -c 显示有多少行被匹配到 -e 可以使用多个表 ...
- 数据结构---Java---HashMap
1.概述 [hash冲突]: 对某个元素进行哈希函数运算,得到一个地址值,要进行插入时,发现此地址被占用,称为hash冲突(哈希碰撞): [hash冲突解决]: 开放定址(发生冲突,继续寻找下一块未被 ...