Jquery非同步提交表單到Action

標籤：

轉載請註明出處：jiq?欽‘s technical Blog

一 需求

出於興趣最近在做分布式註冊中心的管理介面，其中一個模組是左邊的樹顯示所有ZooKeeper節點，使用的ztree實現，點擊樹節點的時候會查詢後台action返回節點資料，顯示在右邊地區，為了不刷整個頁面，所以採用的是Jquery的非同步請求Action返回JSON資料，參考我的這篇文章，然後使用Jquery的load函數載入顯示節點資訊的nodeInfo.jsp，以返回的JSON資料為參數。

效果如下：

現在的需求是：我要在編輯好了節點資訊後，點擊儲存，請求action儲存節點資料，要求當前頁面不跳轉，並且彈出儲存成功的提示資訊。和點擊左邊樹節點重新整理右邊節點資訊地區類似，這就要用到Jquery的非同步表單提交了。

二 解決方案

節點資訊地區以一個表單承載，代碼如下：

<form class="form-horizontal" method="post" id="nodeInfoForm"><fieldset><div class="form-group"><label class="col-lg-2 control-label">名    稱：</label>    <div class="col-lg-9">    <input id="configName" value="<%=node.getName() %>" name="configNode.name"     type="text" class="form-control" placeholder="請輸入名稱" readonly>        </div>    <div class="col-lg-1"></div>    </div>    <div class="form-group">    <label class="col-lg-2 control-label">路    徑：</label>    <div class="col-lg-9">    <input id="configPath" value="<%=node.getPath() %>" name="configNode.path"     type="text" class="form-control" placeholder="請輸入路徑" readonly>    </div>    <div class="col-lg-1"></div>    </div>    <div class="form-group">    <label class="col-lg-2 control-label">配置值：</label>    <div class="col-lg-9">    <input id="configValue" value="<%=node.getValue() %>" name="configNode.value"     type="text" class="form-control" placeholder="請輸入值">    </div>    <div class="col-lg-1"></div>    </div>    <div class="form-group">    <label class="col-lg-2 control-label">屬性值：</label>        <div class="col-lg-9">    <div class="panel panel-default">    <div class="bootstrap-admin-panel-content">    <table style="font-size:13px" class="table table-hover table-condensed table-bordered">    <thead>    <tr>    <th>屬性名稱</th>    <th>屬性值</th>    </tr>    </thead>    <tbody>    <%    HashMap<String, String> attributes = node.getAttributes();    if(attributes != null && attributes.size() > 0)    {    Iterator<String> iterator = attributes.keySet().iterator();    while(iterator.hasNext())    {    String key = iterator.next().toString();    String value = attributes.get(key).toString();    %>    <tr class="active">    <td><%=key%></td>    <td><%=value %></td>    </tr>    <%    }    }    %>    </tbody>    </table>    </div>    </div>    </div>    <div class="col-lg-1"></div>    </div>    <div class="form-group">    <label class="col-lg-2 control-label">描    述：</label>    <div class="col-lg-9">    <textarea id="configDescrip" name="configNode.description" class="form-control"     rows="2" placeholder="請輸入描述" ><%=node.getDescription() %></textarea>    </div>    <div class="col-lg-1"></div>    </div>    <div class="form-group">    <div class="col-lg-1"></div>    <div class="col-lg-4">    <button id="btnFormSubmit" type="button" class="btn btn-primary">儲存</button>    <button id="btnFormReset" type="button" class="btn btn-default">重設</button>    </div>    <div id="myAlert" class="col-lg-6"></div><div class="col-lg-1"></div>    </div></fieldset></form>

非同步提交表單的JQuery代碼如下：

$(document).ready(function () {        $("#btnFormSubmit").click(function () {                $.ajax({            type: "POST",            url: "SaveNodeInfo.action",            data: $("#nodeInfoForm").serialize(),            dataType: "text",            success: function(data) {             var response = eval("("+data+")");            if (data.length > 0 && response=='success')            {            $("#myAlert").html('<div class="alert alert-success"><strong>節點資訊儲存成功!</strong></div>');            }            else            {            $("#myAlert").html('<div class="alert alert-warning"><strong>節點資訊儲存失敗!</strong></div>');            }            },            error: function() {            $("#configInfo").load("error.jsp");                        }        });                         return false;        });    });

和非同步請求action返回json類似，這裡action實現如下：

public String SaveNodeInfo() throws Exception{if(configNode != null){System.out.println(configNode.getDescription());System.out.println(configNode.getValue());//spMapSystem.out.println(configNode.getAttributes());System.out.println(attrKey);}else{System.out.println("configNode對象為空白");}//save node info...this.saveResult = "success";return SUCCESS;}

struts.xml中action配置為：

<action name="SaveNodeInfo" class="org.zk.action.ConfigManageAction" method="SaveNodeInfo">            <result name="success" type="json">            <param name="root">saveResult</param>            </result>        </action>

注意saveResult為action內部變數，需要提供get方法前台頁面才能取得這個返回值。

可以看到非同步請求成功後，如果返回的是succes自訂字串，則提示成功資訊，否則提示失敗資訊。

備忘：可以看到提交到Action的表單中輸入控制項使用了name="obj.attribute"的寫法，這樣只要action中定義了obj對象，並且提供set方法，那麼頁面請求action的時候會自動將表單中的obj對象注入到action中的這個obj變數中。

Jquery非同步提交表單到Action