页面上有一个商品的颜色尺码二维输入框，输入完毕之后需要把数据进行提交，，点击立即购买则进行页面的跳转，通过form表单将数据提交到后台，而点击添加到购物车的话，则会通过ajax进行数据的提交，页面不进行跳转。前台样式：
下面是form表单：
<form id="cartForm" action="${ctx}/cart/save" method="post"><div class="product-page-options"><table class="table-bordered table-condensed table-hover table-advance"><c:set var="sizeNames" value="${fn:split(product.sizeNames, ',')}" /><c:set var="sizeIds" value="${fn:split(product.sizeIds, ',')}" /><c:set var="colorNames" value="${fn:split(product.colorNames, ',')}" /><c:set var="colorIds" value="${fn:split(product.colorIds, ',')}" /><c:set var="sizesCount" value="${fn:length(sizeNames)}" /><thead><tr><th class="colorStyle">颜色</th><c:forEach items="${sizeNames}" var="sizeName" varStatus="status"><th class="inputStyle">${sizeName}</th></c:forEach><th>小计</th></tr></thead><tbody><c:forEach items="${colorNames}" var="colorName" varStatus="colorsStatus"><tr><td class="colorStyle">${colorName}</td><c:forEach items="${sizeNames}" var="sizeName" varStatus="status"><c:set var="index" value="${(colorsStatus.index*sizesCount)+status.index}"/><input type="hidden" name="items[${index}].colorId" value="${colorIds[colorsStatus.index]}"/><input type="hidden" name="items[${index}].sizeId" value="${sizeIds[status.index]}"/><input type="hidden" name="items[${index}].productId" value="${product.productId}"/><td class="inputStyle"><input type="text" name="items[${index}].quantity" class="inputStyle form-control" value="${sizesCount}"/></td></c:forEach><td class="inputStyle">12</td></tr></c:forEach><tr><td class="colorStyle totalStyle">合计</td><c:forEach items="${sizeNames}" var="sizeName" varStatus="status"><td class="inputStyle totalStyle">12</td></c:forEach><td class="inputStyle totalStyle">24</td></tr></tbody></table></div><div class="product-page-cart"><button class="btn btn-primary" type="submit">立即购买</button><input class="btn btn-primary" type="button" id="btnAddCart" value="添加到购物车"/></div></form>通过form的系列化数据进行提交是很简单方便的，下面JavaScript代码如下：
<script type="text/javascript">jQuery(document).ready(function() {$('input#btnAddCart').click( function() {$.ajax({url: '${ctx}/api/v1/drp/cart/add',type: 'post',dataType: 'json',data: $('form#cartForm').serialize(),success: function(data) {alert("success!");}});});});</script>绑定input并且id是btnAddCart的按钮，也就是form里面的添加到购物车这个按钮的click事件，然后进行ajax进行提交，url是ajax的提交地址，type是post方式的，data就直接通过form进行数据的序列化，而不需要像以前那样一个个的去查找，实在是方便不少。
下面是后台接收ajax数据的java代码@RequestMapping(value = "/add",produces = MediaType.APPLICATION_JSON_VALUE)@ResponseBodypublic ResponseEntity<?> add(Cart cart){if(cart.getItems().size()>0){shopCartService.save(cart);}return new ResponseEntity<Cart>(cart, HttpStatus.OK);}
困难与折磨对于人来说，是一把打向坯料的锤，
