使用json完成联动效果
2013-09-12 17:20
267 查看
1.jsp页面
首先是两个下拉框,当公司名字变动时会场负责人的选择列表也相应变换<tr> <td width="50%" bgcolor="#EAF6EA"> <div align="right"> 公司名: </div> </td> <td bgcolor="#FFFFFF"> <s:select list="comInfolist" listValue="Com_name" listKey="Com_id" name="Com_id" value="%{mai.comId}" id="com" onchange="finduserlst1();"></s:select> <label style="color: red;"> </label> </td> </tr> <tr> <td width="50%" bgcolor="#EAF6EA"> <div align="right"> 会场负责人: </div> </td> <td bgcolor="#FFFFFF"> <input type="hidden" id="user_id" value="${mai.responsibleId}"/> <input type="hidden" id="user_name" value="${mai.responsibleName}"/> <select id="comuser" name="comusername" style="width: 150px" > </select> <label style="color: red;"> </label> </td> </tr>
2.js
js的方法中首先获得选中框的值,也就是公司id。使用了json,data处为传值。function finduserlst1(){ //获取下拉框的选中项 var checkText=$("#com").find("option:selected").val(); $("#comuser").empty(); if(checkText==""){ $("#comuser").append("<option value=''>----请选择----</option>"); }else{ $.ajax({ url:"companymanage!findPeopleByComId.do", type:"post", dataType:"json", data:{comID:checkText}, success:function(json){ $("#comuser").append("<option value=''>----请选择----</option>"); $.each(json, function(i){ $("#comuser").append("<option value='"+json[i].userid+"'>"+json[i].realName+"</option>"); }); }, error:function (XMLHttpRequest, textStatus, errorThrown){ return false; } }); } }
3.java方法
然后是action中,首先获得传来的comId.之后是方法。注意这里的需要一个inputstream,不然会报错。这里的comID对应上面json处data所传的值。private String comID; private List<User_info> userlist; private InputStream inputStream; public String findPeopleByComId() { System.out.println("进入了根据公司的id查询所有的人"); userlist = meetingAddrInfoService.findPeopleByComId(Integer .parseInt(comID)); String jsonString = JSONArray.fromObject(userlist).toString(); try { inputStream = new ByteArrayInputStream(jsonString.getBytes("UTF-8")); } catch (UnsupportedEncodingException e) { // TODO Auto-generated catch block e.printStackTrace(); } return "searchUser"; // System.out.println("根据公司id查询所有人:" + userlist + comID); } public InputStream getInputStream() { return inputStream; } public void setInputStream(InputStream inputStream) { this.inputStream = inputStream; } public List<User_info> getUserlist() { return userlist; } public void setUserlist(List<User_info> userlist) { this.userlist = userlist; } public String getComID() { return comID; } public void setComID(String comID) { this.comID = comID; }
4.配置
struts2里的配置如下<!-- json的配置 --> <action name="companymanage" class="com.hb.action.system.MeetingAddrInfoAction" method="{1}"> <result name="searchUser" type="stream"> <param name="contentType">text/json</param> <param name="inputName">inputStream</param> </result> </action>
相关文章推荐
- Drupal中使用form的#autocomplete_path属性完成json格式的ajax文本框自动填充效果
- ajax完成异步的省市联动效果--使用xml接收数据
- 教你一天玩转JavaScript(八)——使用JavaScript完成省市联动的效果
- 使用 AjaxPro 来完成二级联动的效果
- 一天搞定jQuery(四)——使用jQuery完成省市二级联动的效果
- 使用 AjaxPro 来完成二级联动的效果
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- 基于jQuery+JSON的省市联动效果,详细的描述
- jQuery学习(六)——使用JQ完成省市二级联动
- 基于jQuery+JSON的省市二三级联动效果
- IOS开发-使用Alamofire 和 SwiftyJSON 完成服务器api的调用
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
- 使用vue.js实现联动效果的示例代码
- jQuery+JSON三级联动效果,通用
- jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- android json解析使用总结(三) — 三级城市联动的实现
- lightswitch中自动完成框与查询参数的联动效果
- jquery.cityselect.js基于jQuery+JSON的省市-自定义联动效果
- 使用jquery JSON Handler实现级联效果