Jquery异步提交表单到Action
2015-01-28 22:54
155 查看
转载请注明出处:jiq•钦's
technical Blog
一 需求
出于兴趣最近在做分布式注册中心的管理界面,其中一个模块是左边的树显示所有ZooKeeper节点,使用的ztree实现,点击树节点的时候会查询后台action返回节点数据,显示在右边区域,为了不刷整个页面,所以采用的是Jquery的异步请求Action返回JSON数据,参考我的这篇文章,然后使用Jquery的load函数载入显示节点信息的nodeInfo.jsp,以返回的JSON数据为参数。
效果如下:
现在的需求是:我要在编辑好了节点信息后,点击保存,请求action保存节点数据,要求当前页面不跳转,并且弹出保存成功的提示信息。和点击左边树节点刷新右边节点信息区域类似,这就要用到Jquery的异步表单提交了。
二 解决方案
节点信息区域以一个表单承载,代码如下:
异步提交表单的JQuery代码如下:
和异步请求action返回json类似,这里action实现如下:
struts.xml中action配置为:
注意saveResult为action内部变量,需要提供get方法前台页面才能取得这个返回值。
可以看到异步请求成功后,如果返回的是succes自定义字符串,则提示成功信息,否则提示失败信息。
备注:可以看到提交到Action的表单中输入控件使用了name="obj.attribute"的写法,这样只要action中定义了obj对象,并且提供set方法,那么页面请求action的时候会自动将表单中的obj对象注入到action中的这个obj变量中。
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变量中。
相关文章推荐
- 使用jQuery重用form表单并异步提交到其它action
- 使用jQuery重用form表单并异步提交到其他action
- 解决JQuery表单异步提交到action的乱码问题(ajaxform,ajaxsubmit)
- jQuery实现Ajax异步提交表单实现局部刷新
- JQUERY的表单异步提交(ajax)
- jQuery异步提交form表单
- JQuery异步提交表单、HTML提交表单到新窗口或IFrame
- jquery下异步提交表单 异步跨域提交表单
- jquery---------ajax+validate表单异步提交验证
- 使用jQuery.form插件,实现完美的表单异步提交
- jQuery异步提交form表单
- 使用jQuery.form插件,实现完美的表单异步提交
- 使用jQuery实现Ajax异步提交表单实现局部刷新
- Asp.net MVC学习日记十一(JQuery异步提交表单)
- jQuery 异步提交表单实例解析
- jquery---------ajax+validate表单异步提交验证
- Jquery.Form 异步提交表单
- 使用jquery插件jquery.form.js,异步提交表单 1
- jQuery异步提交表单
- mvc中使用JQuery异步提交表单