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>