Struts2 + JQuery + JSON实现AJAX(2)
Struts2+JQuery+JSON实现AJAX2010-04-2213:45网上关于这方面的资料也不少，但多半是struts1的，在Struts2中使用JSON可以更容易实现数据的异步传输。
先做好准备工作:
1.Struts2相关lib,注意将struts2lib下面的以json开头的包也加入到工程。
2.JSONPlugin，它可以将Struts2Action中的结果直接返回为JSON。下载地址：http://jsonplugin.googlecode.com/files/jsonplugin-0.34.jar（支持struts2.1.6及以上版本）。
3.JQuery，JS的一个lib.下载地址：http://www.jquery.com（最新版本为1.3.2）。
准备工作都做好之后，我们可以开始了。建一个WEB工程，把相关的包加入到工程。我们需要做的就是三件事：
一、准备一个JSP页面用于提交ajax请求，这里我使用了JQuery的$.getJSON(url,params,functioncallback(data))函数提交ajax请求到指定url，并且携带参数params，最后用一个回调函数callback处理请求返回结果data；
二、一个处理请求的Action类，并在struts.xml文件中做相应配置：写一个action类处理ajax请求数据，并将返回结果封装成一个JSONObject对象返回给请求页面。同时在struts.xml中配置对应action，指明其返回类型为json并使其package的extends为json-default，并将要返回请求页面的数据放在名为root的param中，如<paramname="root">result</param>。
三、接受请求返回结果：使用JS的eval方法将返回结果data转换成JSON对象，并处理返回结果。
具体参见以下代码：
//login.jsp使用getJSON方法提交ajax请求，并处理请求返回结果。注意请求的url为login.html这是因为我将struts2.preperties中的struts.action.extension改成了htm，默认为action。l
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<%@tagliburi="/struts-tags"prefix="s"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title><s:textname="page.title.login"/></title>
<scripttype="text/javascript"src="jquery-1.3.2.js"></script>
<scripttype="text/javascript"language="javascript">
$(document).ready(function(){
$("#login").click(function(){
login();
});
});
functionlogin(){
varurl="login.html";
varparams={"user.logName":$("#name").attr("value"),"user.password":$("#password").attr("value")};
$.getJSON(url,params,functioncallback(data){
//converttojsonobject
varuser=eval("("+data+")");//
$("#result").each(function(){
$(this).html('welcome,'+user.name);
});
});
}
</script>
</head>
<body>
<s:actionmessage/>
<formmethod="post"id="form"><s:text
name="user.label.name"/>:<inputtype="textbox"name="user.logName"id="name"
value='${param["user.logName"]}'/><br>
<s:textname="user.label.password"/>:<inputtype="password"id="password"
name="user.password"/><br>
<inputtype="button"id="login"value='<s:textname="button.label.login"/>'/></form>
<divid="result">
</div>
</body>
</html>
//struts.xml注意package的extends属性与result的type属性。result为userAction的一个属性，这里将结果返回给ajax的请求页面。
<packagename="login"namespace="/"extends="json-default">
<actionname="login"class="userAction"method="login">
<resulttype="json">
<paramname="root">result</param>
</result>
</action>
</package>
//UserAction.java只需要看login()方法，另外读者需要自己增加一个User的实体类用来获取请求数据。这里我只将user的logName与password封装到了一个map以JSONObject的方式返回（因为还有其它空属性没必要返回）。也可以直接调用JSONObject.fromObject(user)将整个user对象返回给JSON。注意最后返回的并不是一个JSONObject对象，而是一String类型的result。这里的result须与action中的<paramname="root">中配置的一致。这里代码写的比较简单，没有增加对用户名密码的验证
packagecom.word.action;
importjava.util.HashMap;
importjava.util.List;
importjava.util.Map;
importcom.word.vo.User;
importnet.sf.json.JSONObject;
importorg.apache.poi.hssf.record.formula.eval.AddEval;
importorg.apache.struts2.components.ActionError;
importorg.apache.struts2.components.ActionMessage;
importorg.apache.struts2.interceptor.validation.JSONValidationInterceptor;
importcom.opensymphony.xwork2.ActionSupport;
importcom.word.service.IUserService;
publicclassUserActionextendsActionSupport{
privateUseruser;
privateStringresult;
publicStringgetResult(){
returnresult;
}
publicvoidsetResult(Stringresult){
this.result=result;
}
publicUsergetUser(){
returnuser;
}
publicvoidsetUser(Useruser){
this.user=user;
}
privateIUserServiceuserService;
publicvoidsetUserService(IUserServiceuserService){
this.userService=userService;
}
publicStringlogin()throwsException{
Mapmap=newHashMap();
map.put("name",user.getLogName());
map.put("password",user.getPassword());
JSONObjectobj=JSONObject.fromObject(map);
result=obj.toString();
returnSUCCESS;
}
/**
*getUserlist
*/
publicList<User>findAll()throwsException{
returnuserService.findAll();
}
/**
*getUserbyid
*
*@paramid
*@throwException
*/
publicUsergetUserById(Longid)throwsException{
returnuserService.getUserById(id);
}
/**
*createUser
*
*@paramuser
*@throwException
*/
publicStringcreateUser(){
clearErrorsAndMessages();
if(user.getLogName().trim().equals("")){
this.addActionMessage(getText("error.user.name"));
returnINPUT;
}
if(user.getPassword().trim().equals("")){
this.addActionMessage(getText("error.user.password"));
returnINPUT;
}
try{
userService.createUser(user);
this.addActionMessage(getText("user.message.create"));
returnINPUT;
}catch(Exceptione){
this.addActionMessage("注册用户失败");
returnINPUT;
}
}
/**
*updateUser
*
*@paramuser
*@throwException
*/
publicvoidupdateUser()throwsException{
userService.updateUser(user);
}
/**
*deleteUserbyid
*
*@paramid
*@throwException
*/
publicvoiddeleteUser(Longid)throwsException{
userService.deleteUser(id);
}
}
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo