JavaScript Ajax Json实现上下级下拉框联动效果实例代码_javascript技巧
程序员文章站
2022-04-21 09:49:34
...
最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N
public String departmentChangeEvent() throws Exception{
userList=service.queryForList("Workorder.queryUserByDepartmentCode", departmentCode);
if(userList!=null&&userList.size()>0)
{
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setHeader("Cache-Control", "no-store");
PrintWriter writer = response.getWriter();
JSONObject json = new JSONObject();
Map map = new HashMap();
map.put("list",userList);
JSONObject jso = JSONObject.fromObject(map);
writer.write(jso.toString());
writer.flush();
writer.close(); }
return null;
}
JSONObject jso = JSONObject.fromObject(map);
复制代码 代码如下:
部门
人员
部门下拉框的onchange()事件走一个AJAX方法,返回一个JSON对象(JSON里放的是个LIST)。
js方法在此页面的写法:
复制代码 代码如下:
此处返回的data里包含list(list见后文),list里包含着人员的代码,人员的姓名两个属性。然后先把人员下拉框empty(),通过select控件append方法 添加新的下拉框元素。
后台代码:
复制代码 代码如下:
public String departmentChangeEvent() throws Exception{
userList=service.queryForList("Workorder.queryUserByDepartmentCode", departmentCode);
if(userList!=null&&userList.size()>0)
{
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setHeader("Cache-Control", "no-store");
PrintWriter writer = response.getWriter();
JSONObject json = new JSONObject();
Map map = new HashMap();
map.put("list",userList);
JSONObject jso = JSONObject.fromObject(map);
writer.write(jso.toString());
writer.flush();
writer.close(); }
return null;
}
这个方法是部门切换事件,通过departmentCode(field域,有set,get)来求的当前部门下的用户放到userList中。
然后通过标准写法把userList放到一个定义好的HashMap中,KEY为list。
复制代码 代码如下:
JSONObject jso = JSONObject.fromObject(map);
这是最为关键的一步,有的json对象创建方法也可以为JSONObject jso = new JSONObject() ; 然后把list里的记录放入到jso中。。。
在这里是行不通的,前台会认为返回的是个字符串。。。
struts中 返回类型为json
复制代码 代码如下:
推荐阅读
-
利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧
-
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)_javascript技巧
-
js实现收缩菜单效果实例代码_javascript技巧
-
JavaScript Ajax Json实现上下级下拉框联动
-
JS实现模仿微博发布效果实例代码_javascript技巧
-
js实现省市联动效果的简单实例_javascript技巧
-
js省市联动效果完整实例代码_javascript技巧
-
js省市联动效果完整实例代码_javascript技巧
-
JSON+HTML实现国家省市联动选择效果_javascript技巧
-
js实现单行文本向上滚动效果实例代码_javascript技巧