Struts2 + JQuery + JSON实现AJAX

chongdiyang

浏览: 29511 次
性别:
来自: 广州

最近访客更多访客>>

loginboot

xushaomin1122

cnlihao

czl026

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

j2ee

struts jquery json ajax

网上关于这方面的资料也不少，但多半是struts1的，在Struts2中使用JSON可以更容易实现数据的异步传输。

先做好准备工作:

1.Struts2相关lib, 注意将struts2 lib下面的以json开头的包也加入到工程。

2.JSON Plugin，它可以将Struts2 Action中的结果直接返回为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,function callback(data))函数提交ajax请求到指定url，并且携带参数params，最后用一个回调函数callback处理请求返回结果data；

二、一个处理请求的Action类，并在struts.xml文件中做相应配置：写一个action类处理ajax请求数据，并将返回结果封装成一个JSONObject对象返回给请求页面。同时在struts.xml中配置对应action，指明其返回类型为json并使其package的extends为json-default，并将要返回请求页面的数据放在名为root的param中，如<param name="root">result</param>。

三、接受请求返回结果：使用JS的eval方法将返回结果data转换成JSON对象，并处理返回结果。

具体参见以下代码：

// login.jsp 使用getJSON方法提交ajax请求，并处理请求返回结果。注意请求的url为login.html这是因为我将struts2.preperties中的struts.action.extension改成了htm，默认为action。l

Html代码 


 
<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<%@ taglib uri="/struts-tags" prefix="s"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title><s:text name="page.title.login" /></title>  
<script type="text/javascript" src="jquery-1.3.2.js"></script>  
<script type="text/javascript" language="javascript">  
$(document).ready(function(){  
    $("#login").click(function(){  
        login();  
        });  
});  
  
function login(){  
    var url = "login.html";  
    var params = {"user.logName":$("#name").attr("value"),"user.password":$("#password").attr("value")};  
      
    $.getJSON(url,params,function callback(data){  
        // convert to json object  
        var user = eval("("+data+")");//  
          
          
        $("#result").each(function(){  
            $(this).html('welcome ,' + user.name);  
            });  
        });  
    }  
</script>  
</head>  
<body>  
<s:actionmessage/>  
<form  method="post" id="form"><s:text  
    name="user.label.name" />:<input type="textbox" name="user.logName" id="name"  
    value='${param["user.logName"]}' /><br>  
<s:text name="user.label.password" />:<input type="password" id="password"  
    name="user.password" /><br>  
<input type="button" id="login" value='<s:text name="button.label.login" />' /></form>  
<div id="result">  
      
</div>  
</body>  
</html>  

// struts.xml 注意package的extends属性与result的type属性。result为userAction的一个属性，这里将结果返回给ajax的请求页面。

Java代码 


 
<package name="login" namespace="/" extends="json-default" >  
        <action name="login" class="userAction" method="login" >  
            <result type="json">  
                <param name="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中的<param name="root">中配置的一致。这里代码写的比较简单，没有增加对用户名密码的验证。

Java代码 


 
package com.word.action;  
  
import java.util.HashMap;  
import java.util.List;  
import java.util.Map;  
  
import com.word.vo.User;  
  
import net.sf.json.JSONObject;  
  
import org.apache.poi.hssf.record.formula.eval.AddEval;  
import org.apache.struts2.components.ActionError;  
import org.apache.struts2.components.ActionMessage;  
import org.apache.struts2.interceptor.validation.JSONValidationInterceptor;  
  
import com.opensymphony.xwork2.ActionSupport;  
import com.word.service.IUserService;  
  
public class UserAction extends ActionSupport {  
    private User user;  
    private String result;  
      
    public String getResult(){  
        return result;  
    }  
      
    public void setResult(String result){  
        this.result = result;  
    }  
  
    public User getUser() {  
        return user;  
    }  
  
    public void setUser(User user) {  
        this.user = user;  
    }  
  
    private IUserService userService;  
  
    public void setUserService(IUserService userService) {  
        this.userService = userService;  
    }  
  
    public String login() throws Exception {  
          
        Map map = new HashMap();  
        map.put("name", user.getLogName());  
        map.put("password",user.getPassword());  
        JSONObject obj = JSONObject.fromObject(map);  
          
          
        result = obj.toString();  
          
        return SUCCESS;  
    }  
  
    /** 
     * get User list 
     */  
    public List<User> findAll() throws Exception {  
        return userService.findAll();  
    }  
  
    /** 
     * get User by id 
     *  
     * @param id 
     * @throw Exception 
     */  
    public User getUserById(Long id) throws Exception {  
        return userService.getUserById(id);  
    }  
  
    /** 
     * create User 
     *  
     * @param user 
     * @throw Exception 
     */  
    public String createUser() {  
        clearErrorsAndMessages();  
          
        if(user.getLogName().trim().equals("") ){  
            this.addActionMessage(getText("error.user.name"));  
            return INPUT;  
        }  
        if(user.getPassword().trim().equals("") ){  
            this.addActionMessage(getText("error.user.password"));  
            return INPUT;  
        }  
        try{  
            userService.createUser(user);  
            this.addActionMessage(getText("user.message.create"));  
            return INPUT;  
        }catch(Exception e){  
            this.addActionMessage("注册用户失败");  
            return INPUT;  
        }  
    }  
  
    /** 
     * update User 
     *  
     * @param user 
     * @throw Exception 
     */  
    public void updateUser() throws Exception {  
        userService.updateUser(user);  
    }  
  
    /** 
     * delete User by id 
     *  
     * @param id 
     * @throw Exception 
     */  
    public void deleteUser(Long id) throws Exception {  
        userService.deleteUser(id);  
    }  
  
}  

分享到：

JSON | 常见HTTP状态（304，200等）

2012-12-30 22:18
浏览 891
评论(0)
分类:开源软件
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论