本文开发环境是SSH2,ajax插件使用jQuery 1.2.6.js和json2.js
实现目的:
在struts2 标签s:doubleselect二级联动标签的基础上实现事件:第二级onchange时调用struts2 action,在action中查询一个名称,然后返回回来,此信息显示在页面上(这只是给用户一个提示信息,不影响表单能否提交)
由于struts2 doubleselect标签任何事件都不起作用,只能根据查看源文件中生成的id来定义它的onchange事件
jsp页面引入了jquery.js和json2.js
需要加事件的二级联动jsp代码
view plaincopy to clipboardprint?
<td class="alignLeft" width="22%">
所属业务/项目名称:
</td>
<td valign="top" class="alignLeft" width="20%">
<s:doubleselect name="changeApplyFormBO.operationId" list="operationList" listKey="id"
listValue="operationName" doubleList="operationSubProductList"
doubleListKey="id" doubleListValue="prudName" doubleName="changeApplyFormBO.productId"
headerKey="" headerValue="--- Please Select ---" />
<span id="company" style="color:red"></span>
</td>
<td class="alignLeft" width="22%">
所属业务/项目名称:
</td>
<td valign="top" class="alignLeft" width="20%">
<s:doubleselect name="changeApplyFormBO.operationId" list="operationList" listKey="id"
listValue="operationName" doubleList="operationSubProductList"
doubleListKey="id" doubleListValue="prudName" doubleName="changeApplyFormBO.productId"
headerKey="" headerValue="--- Please Select ---" />
<span id="company" style="color:red"></span>
</td>
我们需要在“项目名称”被改变的事件下调用函数,在生成的静态页面中查得它的id是cbApplySubmit_changeApplyFormBO_productId
说明一下,这里生成的id有一点规律,貌似。cbApplySubmit是本页面form表单的action,而changeApplyFormBO.productId是“项目名称”的name
下面给出定制下拉菜单事件的js
view plaincopy to clipboardprint?
<script>
$(function(){
var obj=document.getElementById("cbApplySubmit_changeApplyFormBO_productId");
obj.οnchange=function(){
var prodId=obj.value;
var url="${contextPath}/assets/businessChange/ajaxGetCompany.do";
var jsonProd={productId:prodId}; //JSON对象
var prodStr=JSON.stringify(jsonProd); //将JSON对象转变成JSON格式的字符串
$.post(url,{json:prodStr},callback,"json");
}
function callback(json){
$("#company").html(json.msg);
}
});
</script>
<script>
$(function(){
var obj=document.getElementById("cbApplySubmit_changeApplyFormBO_productId");
obj.οnchange=function(){
var prodId=obj.value;
var url="${contextPath}/assets/businessChange/ajaxGetCompany.do";
var jsonProd={productId:prodId}; //JSON对象
var prodStr=JSON.stringify(jsonProd); //将JSON对象转变成JSON格式的字符串
$.post(url,{json:prodStr},callback,"json");
}
function callback(json){
$("#company").html(json.msg);
}
});
</script>
这里,不管是从浏览器端(JS,Ajax,Jquery等)发送给服务器端,还是从服务器端(Struts的Action,Servlet等)发送回客户端,发送的都是JSON格式的字符串
view plaincopy to clipboardprint?
var jsonProd={productId:prodId};
var jsonProd={productId:prodId};
这句是组装JSON对象,这里很简单,key是productId,value是页面选择的项目名称的id
view plaincopy to clipboardprint?
//将JSON对象转变成JSON格式的字符串
var prodStr=JSON.stringify(jsonProd);
//将JSON对象转变成JSON格式的字符串
var prodStr=JSON.stringify(jsonProd);
通过JavaScript内置对象JSON的stringify方法,将JSON对象转换成字符串。因为,我们传送给服务器端的要是JSON格式的字符串。
view plaincopy to clipboardprint?
$.post(url,{json:prodStr},callback,"json");
$.post(url,{json:prodStr},callback,"json");
这一句,jquery用POST方法向服务器端发送数据,url是我们要调用的action全路径,而{json:prodStr}是我们要发送的数据(data),{json:prodStr},其实也是一个JSON对象,Key:value的形式,注意,我们把prodStr这个json串发过去,在Action那里接收时,要接收“json”这个变量,这个变量的值就是我们发送的prodStr字符串。
回调函数(callback)是指服务器端成功返回时,在JS端执行的函数。最后一个参数“json”是返回数据类型的一种,另外,还有”text”、“xml”等
view plaincopy to clipboardprint?
function callback(json){
$("#company").html(json.msg);
}
});
function callback(json){
$("#company").html(json.msg);
}
});
company是span的id,请看最上面二级联动标签处。这个函数用来显示action中组装的json对象的value值
struts2 action类
view plaincopy to clipboardprint?
import org.json.JSONObject;
public class CBApplyAction extends ActionSupport {
private IProductMng productMng;
private String json;
/**
* 通过选择的项目名称,给出提示事业部名称的提示信息
*
* @return
* @throws Exception
*/
public void ajaxGetCompany() throws Exception {
JSONObject jsonObj = new JSONObject(json); // 将JSON格式的字符串构造成JSON对象
String productId = jsonObj.getString("productId"); // 获取JSON对象中的productId属性的值
ProductBO prod = productMng.loadProduct(Integer.parseInt(productId));
Integer companyId = prod.getCompanyId();
CompanyBO comp = productMng.loadCompany(companyId);
String companyName = "事业部为:" + comp.getName();
json = "{msg:'" + companyName + "'}"; //构造JSON格式的字符串
sendMsg(json); //发送JSON格式的字符串回JS端
}
public void sendMsg(String content) throws IOException{
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.getWriter().write(content);
}
public String getJson() {
return json;
}
public void setJson(String json) {
this.json = json;
}
public void setProductMng(IProductMng productMng) {
this.productMng = productMng;
}
}
import org.json.JSONObject;
public class CBApplyAction extends ActionSupport {
private IProductMng productMng;
private String json;
/**
* 通过选择的项目名称,给出提示事业部名称的提示信息
*
* @return
* @throws Exception
*/
public void ajaxGetCompany() throws Exception {
JSONObject jsonObj = new JSONObject(json); // 将JSON格式的字符串构造成JSON对象
String productId = jsonObj.getString("productId"); // 获取JSON对象中的productId属性的值
ProductBO prod = productMng.loadProduct(Integer.parseInt(productId));
Integer companyId = prod.getCompanyId();
CompanyBO comp = productMng.loadCompany(companyId);
String companyName = "事业部为:" + comp.getName();
json = "{msg:'" + companyName + "'}"; //构造JSON格式的字符串
sendMsg(json); //发送JSON格式的字符串回JS端
}
public void sendMsg(String content) throws IOException{
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.getWriter().write(content);
}
public String getJson() {
return json;
}
public void setJson(String json) {
this.json = json;
}
public void setProductMng(IProductMng productMng) {
this.productMng = productMng;
}
}
JSONObject是我从json的网站http://www.json.org/java/index.html上下载了一些java文件,然后将这些.java文件打成一个jar包json.jar,放在项目lib里面
ajaxGetCompany方法没有像struts2 别的方法那样有返回值String,这里设的是void,因我们不需要任何跳转
这里有个需要注意的,json = "{msg:'" + companyName + "'}"; companyName外面应该有引号括起来
struts2 配置文件
view plaincopy to clipboardprint?
<action name="ajaxGetCompany" class="CBApplyAction"
method="ajaxGetCompany">
</action>
<action name="ajaxGetCompany" class="CBApplyAction"
method="ajaxGetCompany">
</action>
没有result
暂时没找到csdn传附件的地方
所用到的js文件和jar包在这里下载,我放到javaeye博客里去了
下载文件:
- jquery.js.rar (16 KB)
- 下载次数: 536
- json2.js.rar (5.2 KB)
- 下载次数: 669
- json-lib-2.1-jdk15.jar (122 KB)
- 下载次数: 646
- json.jar (39.8 KB)
- 下载次数: 718