您的位置:首页 > Web前端 > JavaScript

使用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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: