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变量中。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。