jquery ajax前后端复杂数据交互

最新推荐文章于 2024-07-04 15:33:39 发布

xuehaichouxiaoya

最新推荐文章于 2024-07-04 15:33:39 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/xuehaichouxiaoya/article/details/81232287

版权

最近在写一个后台管理系统，总结一下ajax前后端数据交互的问题。在这里，前端采用ajax提交form表单，后端采用实体类进行接收。

首先来看前端代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<style>
</style>
	</head>
	<body>
		<div>
			
			<form id="activeForm">
				<input type="hidden" id="activeId" name='activeId' value="活动id"/>
				
				活动名称：<input type="text" id="activeName" name='activeName'/>
				
					<!--注意这里的name命名方式，productList对应于实体类的list集合的命名,
					productCode和productName又对应list集合内的实体名-->
				<div id='activeProduct'>
					
				产品1code:	<input type="text" class='productCodes' id="productCode" name='productList[0].productCode'/>
				产品1name:	<input type="text" class='productNames' id="productName" name='productList[0].productName'/>
					
				产品2code:	<input type="text" class='productCodes' id="productCode" name='productList[1].productCode'/>
				产品2name:  <input type="text"  class='productNames' id="productName" name='productList[1].productName'/>
					
				产品3code:	<input type="text" class='productCodes' id="productCode" name='productList[2].productCode'/>
				产品3name:	<input type="text" class='productNames' id="productName" name='productList[2].productName'/>
				</div>	
				活动banner: <input type="text" id="bannerImgUrl" name='bannerImgUrl'/>
				
				<a id="button" href="javascript:save1()">保存1</a>
				<a id="button" href="javascript:save2()">保存2</a>
			</form>
			
		</div>
		
		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		
		<script>
			/*使用jquery ajax的serializableArray方法进行序列化*/
			function save1(){
				var url='/xxxx/active/saveActive';
				var datas = $("#activeForm").serializeArray();
				console.log(datas);/*可以打印下data数据看看*/
				/*发送ajax请求*/
				$.ajax({
					url:url,
					dataType:'json',
					data:datas,
					type:'post',
					contentType:'application/x-www-form-urlencoded;charset=UTF-8',
					
					success : function(response){/*正确响应后处理*/
						
					},
					error : function(e){/*错误响应后处理*/
						
					}
					
					
				});
			}
			
			/*另一种不通过form序列化，自己组装数据的方式*/
			function save2(){
				var datas = getDatas();
				var url='/xxxx/active/saveActive';
				console.log(datas);/*可以打印下data数据看看*/
				/*发送ajax请求*/
				$.ajax({
					url:url,
					dataType:'json',
					data:datas,
					type:'post',
					contentType:'application/x-www-form-urlencoded;charset=UTF-8',
					
					success : function(response){/*正确响应后处理*/
						
					},
					error : function(e){/*错误响应后处理*/
						
					}
					
				});
				
			}
			
			function getDatas(){
				var activeId = $("#activeId").val();
				var activeName = $("#activeName").val();
				var bannerImgUrl = $("#bannerImgUrl").val();
				
				var params = {
					activeId : activeId,
					activeName : activeName,
					bannerImgUrl : bannerImgUrl
				}
				
				var productCodes = $("#activeProduct").find(".productCodes");
				var productNames = $("#activeProduct").find(".productNames");
				
				for (i=0;i<productCodes.length;i++) {
					var key1 = 'productlist['+i+']productCode';/*这样可以动态设置名称，*/
					var key2 = 'productlist['+i+']productName';
					params[key1] = $(productCodes[i]).val();
					params[key2] = $(productName[i]).val();
				}
				
				return params;
			}
		
		</script>
		
	</body>
</html>

form表单内input标签的name名是与后台接受的实体类对应的。来看看实体类代码

package java;

import java.io.Serializable;
import java.util.List;

public class ActiveDTO implements Serializable {

	private static final long serialVersionUID = 5206317808772530605L;
	
	private String activeId;
	private String activeName;
	private String bannerImgUrl;
	private List<ProductDTO> productList;//注意这里的名称与form 中input标签名称的对应关系
	
	public String getActiveId() {
		return activeId;
	}
	public void setActiveId(String activeId) {
		this.activeId = activeId;
	}
	public String getActiveName() {
		return activeName;
	}
	public void setActiveName(String activeName) {
		this.activeName = activeName;
	}
	public String getBannerImgUrl() {
		return bannerImgUrl;
	}
	public void setBannerImgUrl(String bannerImgUrl) {
		this.bannerImgUrl = bannerImgUrl;
	}
	public List<ProductDTO> getProductList() {
		return productList;
	}
	public void setProductList(List<ProductDTO> productList) {
		this.productList = productList;
	}
	
	

}

注意，接受的实体类要实现序列化，lsit中的productList也要序列化

package java;

import java.io.Serializable;

public class ProductDTO implements Serializable {

	/**
	 * 
	 */
	private static final long serialVersionUID = 3113833883846872525L;

	private String productCode;
	
	private String productName;

	public String getProductCode() {
		return productCode;
	}

	public void setProductCode(String productCode) {
		this.productCode = productCode;
	}

	public String getProductName() {
		return productName;
	}

	public void setProductName(String productName) {
		this.productName = productName;
	}
	
	
}

我们来看看datas数据格式

save1()中的数据

save2中的数据

接下来看看controller的接受代码

package java;

import java.util.Map;

@Controller
@RequestMapping("active")
public class ActiveController {

	@RequestMapping("saveActive")
	@ResponseBody
	public Map<String,Object> saveActive(ActiveDTO active,HttpServletRequest request){//这里的active就带有需要的数据
		//业务代码
	}
}

xuehaichouxiaoya

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
jquery ajax前后端复杂数据交互

最近在写一个后台管理系统，总结一下ajax前后端数据交互的问题。在这里，前端采用ajax提交form表单，后端采用实体类进行接收。首先来看前端代码 &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &a
复制链接

扫一扫