Form表单Ajax系列化提交数据

页面上有一个商品的颜色尺码二维输入框，输入完毕之后需要把数据进行提交，点击立即购买则进行页面的跳转，通过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)
	@ResponseBody
	public ResponseEntity<?> add(Cart cart){
		if(cart.getItems().size()>0){
			shopCartService.save(cart);
		}
		return new ResponseEntity<Cart>(cart, HttpStatus.OK);
	}