Jquery异步提交表单到Action

页面导航:首页 > 网络编程 > JavaScript > Jquery异步提交表单到Action

Jquery异步提交表单到Action

来源: 作者: 时间:2016-02-03 09:20 【

一 需求出于兴趣最近在做分布式注册中心的管理界面,其中一个模块是左边的树显示所有ZooKeeper节点,使用的ztree实现,点击树节点的时候会查询后台action返回节点数据,显示在右边区

 

一 需求

出于兴趣最近在做分布式注册中心的管理界面,其中一个模块是左边的树显示所有ZooKeeper节点,使用的ztree实现,点击树节点的时候会查询后台action返回节点数据,显示在右边区域,为了不刷整个页面,所以采用的是Jquery的异步请求Action返回JSON数据,参考我的这篇文章,然后使用Jquery的load函数载入显示节点信息的nodeInfo.,以返回的JSON数据为参数。

效果如下:

\

现在的需求是:我要在编辑好了节点信息后,点击保存,请求action保存节点数据,要求当前页面不跳转,并且弹出保存成功的提示信息。和点击左边树节点刷新右边节点信息区域类似,这就要用到Jquery的异步表单提交了。

 

二 解决方案

节点信息区域以一个表单承载,代码如下:

 


name=configNode.name type=text class=form-control placeholder=请输入名称 readonly>
 
name=configNode.path type=text class=form-control placeholder=请输入路径 readonly>
 
name=configNode.value type=text class=form-control placeholder=请输入值>
 
<% HashMap attributes = node.getAttributes(); if(attributes != null && attributes.size() > 0) { Iterator iterator = attributes.keySet().iterator(); while(iterator.hasNext()) { String key = iterator.next().toString(); String value = attributes.get(key).toString(); %> <% } } %>
属性名称 属性值
<%=key%> <%=value %>
 
 
 
 
 

异步提交表单的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).('
节点信息保存成功!
'); } else { $(#myAlert).html('
节点信息保存失败!
'); } }, 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配置为:

 

 


            saveResult
            
        

注意saveResult为action内部变量,需要提供get方法前台页面才能取得这个返回值。

 

可以看到异步请求成功后,如果返回的是succes自定义字符串,则提示成功信息,否则提示失败信息。

 

备注:可以看到提交到Action的表单中输入控件使用了name=obj.attribute的写法,这样只要action中定义了obj对象,并且提供set方法,那么页面请求action的时候会自动将表单中的obj对象注入到action中的这个obj变量中。

 

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<