一、前端頁面程式碼

<form id="reForm" action="">
	<table>
		<tr>
			<td>姓名：</td>
			<td><input name="username" type="text"></td>
		</tr>
		<tr>
			<td>年齡：</td>
			<td><input name="age" type="text"></td>
		</tr>
		<tr>
			<td>家庭住址：</td>
			<td><input name="address" type="text"></td>
		</tr>
	</table>				
</form>
<div style="text-align: center">
	<p><button id="commit">話費充值</button></p>
</div>
 

二、頁面JS程式碼

<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function(){
		$("#commit").click(function(){
			
			// 1、使用JQ獲取整個form表單的資料,獲得的物件是個Object陣列			
			var form = $("#reForm").serializeArray();//[Object][Object][Object]
			
			// 2、用來儲存遍歷陣列後的資料，獲得的物件是一個Object
			var source = {};
			$.each(form,function(i,n){
				source[form[i].name] = form[i].value;
			});
			
			// 3、從Object物件中提取成json字串
			var data = JSON.stringify(source);//{"name":"John","age":24,"address":"USA"}
			
			// 4、本人使用的是利用ajax進行傳值，由於是採用Json格式傳值，需要設定 "contentType='application/json'"
			//	    但是隻有 $.ajax() 方法有這個屬性選項，如果要使用$.get()或者$.post()方法需要重寫，這裡不做介紹，需要的自行百度
			/* 	
				$.post("${pageContext.request.contextPath}/Freemarker/json.action",
					{"data":data},function(msg){
						alert(msg);
					},"json");  /不可直接使用
			*/
			$.ajax({
				url:"${pageContext.request.contextPath}/Freemarker/json.action",
				type:"POST",
				data:data,
				contentType:"application/json",
				dataType:"json",
				success:function(msg){
					alert(msg);	
				}
			});
		});
	});
</script>
 

三、後端Java程式碼

@RequestMapping("/json.action")
public @ResponseBody User json(@RequestBody User data){
	System.out.println(data.toString());
	//輸出結果為User [username=John, age=24, address=USA]（toString()方法）
	return data;
}

四、一些注意事項

1、需要 jackson包的支援，本人使用的是maven建立專案，只需要在pom.xml中配置下即可

     建立普通Web專案 匯入下圖中的三個包即可。

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
</dependency>

注：只需要配置jackson-databind即可，其它兩個包會依賴注入。

2、使用的ajax必須設定contentType屬性為application/json。

3、springmvc是配置檔案中開啟自動配置處理器對映器與處理器介面卡

<!-- 使用註解配置處理器對映器與處理器介面卡 -->
<mvc:annotation-driven/>

4、如果需要後端向前端傳遞資料就必須使用@ResponseBody註解，否則會報錯