最近在写一个后台管理系统,总结一下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就带有需要的数据
//业务代码
}
}