struts2中ajax的使用

前面写过原生js实现ajax的博客，但是用起来不是太方便，jquery对原生的js进行了很好的封装，使用起来也更简单；但是在项目中使用了struts2，处理ajax却又不同，花了几天时间研究，终于解决了这个问题。

首先，大家都知道struts2中有处理表单提交的方法，表单元素中的name对应着action中的成员变量，当你提交的时候，会把输入组中的数据映射到action的成员变量中，这里我纠结了好久，因为不知道是ajax异步提交的还是框架为我们提交的。所以在表单输入组中，如果是用ajax异步提交，就不用写name属性。

其实在struts2中，有对ajax的支持，通过ajax提交的data（可以是json类型）也可以映射成action中的成员变量，只需要调用action中的getter方法就能获取到相应的值，但是需要额外导入相应的jar包：

commons-lang-2.4.jar；

json-lib-2.3-jdk13.jar；

jsonplugin-0[1].32.jar；

ezmorph-1.0.2.jar；

commons-beanutils-1.7.0.jar；

这些jar包在官网中提供的strut2的文件中的lib目录下都可以找到，为了版本统一，尽量在官网提供的文件中去找这些jar包。

 

这是前台的form：（这里的form中的action中不用写，<input type="submit">,这些可能会导致页面刷新，就没有达到异步的效果了。）

　<form>
     <input type="hidden" id="articleID"  value=<s:property value="targetArticle.articleID"/>>
     <input type="text" placeholder="昵称" id="userName" class="form-control"/>
     <textarea rows="6"  id="commentContent" class="form-control" cols="18"></textarea>
     <input type="button" class="form-control"  value="提交评论" id="commentSubmit">
 </form>

这是使用jquery进行异步提交，避免出现路径错误，在url中使用了EL表达式，因为这段jquery是在jsp页面时内嵌的，所以能够使用EL表达式。(后来实践证明，在外联的js中使用这个EL表单式也没有报错，也能正确使用)

success : function(data){...}中的data就是从服务端返回的数据，这个数据可以作为action中的一个成员变量，在action中可以通过setter方法进行赋值，

然后再struts.xml中进行参数配置，<param name="root">result</param>就可以在前台返回服务端赋值的数据了，这里的result不仅是一个单独的字符串，甚至可以是Java中的list，在前台也可以用jquery对list解析遍历。

//异步提交表单
                $('#commentSubmit').click(function() {
                    var userName = $('#userName').val();
                    var commentContent = $('#commentContent').val();
                    var articleID = $('#articleID').val();
                    //alert(articleID);
                    if (userName == "" || commentContent == ""||articleID=="") {
                        alert("昵称和内容都不能为空");
                            return false;
                    }

                $.ajax({ 
                    type : "post",
                    url : "${pageContext.request.contextPath}/addComment",
                    data : {
                        userName : userName,
                        commentContent : commentContent,
                        articleID : articleID
                    },
                    dataType:"json",
            
                    success : function(data) {
                        alert(data);
                        $('#commentContent').val("");
                        $('#userName').val("");
                        location.reload();
                    },

                    error : function() {
                        alert("评论失败");
                    }
                });
            });

然后再是action，省略部分代码。可以看出action中的成员变量名称都和ajax中的data：｛...｝名称相一致

public class AddComment extends ActionSupport {

    private static final long serialVersionUID = 1L;
    private String userName;
    private String commentContent;
    private String articleID;
    private String result;

        getter and setter...

@Override
    public String execute() throws Exception {

        HttpServletRequest request=ServletActionContext.getRequest();
        CommentDAO commentDAO=new CommentDAO();
        commentDAO.addComments(this.userName, this.commentContent, this.articleID);
        this.setResult("评论成功");return "success";
    }

}

最后再来说一下struts.xml，这个和之前的不一样，之前使用struts.xml，package中的extends后面是：struts-default，使用ajax之后就是：json-default

两者区别：http://www.cnblogs.com/lbangel/archive/2013/05/24/3096986.html 

<param name="root">result</param> 上文提过，这个参数就是前台中返回的数据。

<package name="filter"  extends="json-default">　　　　　
　　　　 <action name="addComment" class="blog.controller.action.AddComment">
            <result name="success" type="json">
                <param name="root">result</param>
            </result>
        </action>