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());
			//spMap
			System.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变量中。