本文介紹了springMVC常用的傳參方式和一些注意的事項，頁面表單主要以ajax的形式提交.

本帥是個菜雞，水平有限，若有什麼講得不對或有補充的地方歡迎各位提意見。

一、傳遞String型別

1.controller方法使用String物件作為引數接收

（a） controller

使用controller使用string型別接收，引數名與ajax提交引數名對應即可

	@RequestMapping("test")
	@ResponseBody
	public RespMessage test(String a,String b){
		System.out.println(a);
		System.out.println(b);
		return RespMessage.success();//這個是返回固定格式的響應資料，不用管
	}
 

（b）頁面提交程式碼

	var data = {
		a:"paramA",
		b:"paramB"
	}
	
	$.ajax({
		"type" : "post",//請求方式
		"url" : "test",//請求連線
		"dataType":"json",//預期伺服器返回格式，不設定jq也會自己判斷
		//"contentType" : "application/x-www-form-urlencoded;charset=utf-8",
		//不要指定contentType，它會自動識別傳參型別，設定不對反而會報400
		data:data,//請求引數
		success : function(data) {}
	});
 

（c）控制檯輸出

paramA
paramB

2. controller使用bean作為引數接收

（a）TestBean

public class TestBean {
	private String a;
	private String b;
	public String getA() {
		return a;
	}
	public void setA(String a) {
		this.a = a;
	}
	public String getB() {
		return b;
	}
	public void setB(String b) {
		this.b = b;
	}
}
 

（b）controller

ajax提交的引數名需要與TestBean成員物件名對應

	@RequestMapping("test")
	@ResponseBody
	public RespMessage test(TestBean testBean){
		System.out.println(testBean.getA());
		System.out.println(testBean.getB());
		return RespMessage.success();
	}

（c）頁面提交程式碼同 "一. 1.（b）"

（d）控制檯輸出同 " 一. 1.（c）"

3.使用HttpServletRequest接收

（a）controller

	@RequestMapping("test3")
	@ResponseBody
	public RespMessage test(HttpServletRequest request){
		System.out.println(request.getParameter("a"));
		System.out.println(request.getParameter("b"));
		return RespMessage.success();
	}

注意：Content-Type不是application/x-www-form-urlencoded的POST請求是不會讀取請求體資料和進行相應的引數處理的，即不會解析表單資料來放到request parameter map中。所以通過request.getParameter(name)是獲取不到的。 其他同上

二、傳遞陣列

1.使用urlencodeed的形式

（a）頁面提交程式碼

	/*var data = {
		arr:['a','b','c']
	}*///這種方式是不能伺服器是接收不到資料的 
	var data = "arr=a&arr=b&arr=c"
	//或者
	//var data = "arr=a,b,c";
	$.ajax({
		"type" : "post",//請求方式
		"url" : "test5",//請求連線
		"dataType":"json",//預期伺服器返回格式，不設定jq也會自己判斷
		data:data,
		success : function(data) {}
	});

（b）controller

	@RequestMapping("test")
	@ResponseBody
	public RespMessage test(String[] arr){
		for(String a:arr){
			System.out.println(a);
		}
		return RespMessage.success();
	}

（c）控制檯輸出 a
b
c

（d）順便一提，我們可以使用jq的serialize()方法將form序列化成"arr=a&arr=b&arr=c"這樣的格式的資料，具體如下： html部分

	<form id="form" action="">
		<input type="text" name="arr" value="a">
		<input type="text" name="arr" value="b">
		<input type="text" name="arr" value="c">
	</form> 

js部分

	var data = $("#form").serialize()
	//data="arr=a&arr=b&arr=c"

2.利用@RequestBody接收

（a）controller 在引數上加上@RequestBody註解後就可以接收到前端傳來的json格式的資料

	@RequestMapping("test")
	@ResponseBody
	public RespMessage test(@RequestBody String[] arr){
		for(String a:arr){
			System.out.println(a);
		}
		return RespMessage.success();
	}

（b）頁面提交程式碼 前端這裡要注意的地方有兩個，一是jq封裝的ajax引數的data這裡要傳字串格式的資料，也就是說在傳值之前需要呼叫JSON.stringify()方法將json物件轉成字元型別，這並不代表伺服器拿到的是字串，到了伺服器那邊是json物件，只是前端這裡傳參需要的是字串，其內部是怎麼轉換的還沒有進行深入研究。 二是要制定contentType為"application/json"否則會報415錯誤。

	var data = ['a','b','c'];
	data = JSON.stringify(data);//這一部很重要，將json物件轉成字串格式
	$.ajax({
		"type" : "post",//請求方式
		"url" : "test6",//請求連線
		"contentType" : "application/json;charset=utf-8",//這個時候就必須加contentType
		"dataType":"json",//預期伺服器返回格式，不設定jq也會自己判斷
		data:data,
		success : function(data) {}
	});

（c）控制檯輸出 a
b
c

3.使用@RequestParam

這個方法有個不好的地方就是如果這個引數沒有傳就會報異常 （a）controller

	@RequestMapping("test")
	@ResponseBody
	public RespMessage test(@RequestParam(value = "arr[]") String[] arr){
		for(String a:arr){
			System.out.println(a);
		}
		return RespMessage.success();
	}

（b）請求頁面程式碼

	var data = {
		arr:['a','b','c']
	}
	$.ajax({
		"type" : "post",//請求方式
		"url" : "test4",//請求連線
		"dataType":"json",//預期伺服器返回格式，不設定jq也會自己判斷
		data:data,
		success : function(data) {}
	});

4.使用formData

（a）controller

	@RequestMapping("test5")
	@ResponseBody
	public RespMessage test2(String[] arr){
		for(String a:arr){
			System.out.println(a);
		}
		return RespMessage.success();
	}

（b）請求介面程式碼

	var data = new FormData($('#form')[0]);
	$.ajax({
		"type" : "post",//請求方式
		"url" : "test5",//請求連線
		processData:false,//必須加否則出錯
        contentType:false,//必須加否則出錯
		"dataType":"json",//預期伺服器返回格式，不設定jq也會自己判斷
		data:data,
		success : function(data) {}
	});

三、傳遞複雜物件

一般遇到比較複雜的物件就使用@requestBody註解比較方便

1.使用@requestBody

（a）bean

public class TestBean2 {
	
	private String a;
	
	private String b;
	
	private TestBean bean;
	
	private TestBean[] beans;
	
	public TestBean[] getBeans() {
		return beans;
	}
	public void setBeans(TestBean[] beans) {
		this.beans = beans;
	}
	
	public String getA() {
		return a;
	}
	
	public void setA(String a) {
		this.a = a;
	}
	
	public String getB() {
		return b;
	}
	
	public void setB(String b) {
		this.b = b;
	}
	public TestBean getBean() {
		return bean;
	}
	public void setBean(TestBean bean) {
		this.bean = bean;
	}
	
}

（b）controller

	@RequestMapping("test7")
	@ResponseBody
	public RespMessage test7(@RequestBody TestBean2 test){
		
		return RespMessage.success();
	}

（c）請求頁面程式碼

	var data = {
		a:"paramA",
		b:"paramB",
		bean:{a:"beanA",b:"beanB"},
		beans:[{a:"beansA1",b:"beadsB1"},{a:"beansA2",b:"beadsB2"}]
	}
	data = JSON.stringify(data);
	$.ajax({
		"type" : "post",//請求方式
		"url" : "test7",//請求連線
		"dataType":"json",//預期伺服器返回格式，不設定jq也會自己判斷
		"contentType" : "application/json;charset=utf-8",
		data:data,
		success : function(data) {}
	});

（d）測試結果

2.使用form提交

（a）controller

	@RequestMapping("test8")
	@ResponseBody
	public RespMessage test8(TestBean2 test){
		
		return RespMessage.success();
	}

（b）提交頁面程式碼

	<form id="form" action="test8" method="post">
		<input type="text" name="a" value="paramA">
		<input type="text" name="b" value="paramB">
		<input type="text" name="bean.a" value="beanA">
		<input type="text" name="bean.b" value="beanB">
		<input type="text" name="beans[0].a" value="beans0A">
		<input type="text" name="beans[0].b" value="beans0B">
	</form> 

順便一提：這個也可以通過var data = new FormData($('#form')[0]);獲取formdata物件然後通過ajax提交，具體可以參照二.4這裡就不贅述了。

四、傳遞檔案

1.使用form提交

（a）controller

	@RequestMapping("test10")
	@ResponseBody
	public RespMessage test10(MultipartFile file){
		try {
			file.transferTo(new File("E://".concat(file.getOriginalFilename())));
		} catch (IllegalStateException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return RespMessage.success();
	}

（b）提交頁面程式碼

	<form id="form" action="test10" method="post" enctype="multipart/form-data">
		<input type="file" name="file">
		<input type="submit" value="提交">
	</form> 

順便一提：檔案上傳同樣可以使用formdata物件使用ajax進行提交，具體參考上面的步驟，這裡就不贅述了。 這裡順便提供一個帶進度條的檔案上傳方法：

//上傳按鈕點選
		$("#uploadbtn").click(function(){
			var files = $("#file")["0"].files;
			var len = files.length;
			for(var i=0;i<len;i++) {
				UpladFile(files[i],i);
			}
		})
		
				
		//開始上傳
		function UpladFile(fileObj,i) {  
		    //bar.fadeIn();
	        //var fileObj = document.getElementById("file").files[0]; // js 獲取檔案物件  
	        var FileController = "/cwjgpt/notice/FileUpload.do"; // 接收上傳檔案的後臺地址   
	        // FormData 物件---進行無重新整理上傳  
	        var form = new FormData();  
	        //form.append("author", "hooyes"); // 可以增加表單資料  
	        form.append("file", fileObj); // 檔案物件  
	        // XMLHttpRequest 物件  
	        var xhr = new XMLHttpRequest();  
	        xhr.open("post", FileController, true);  
	        xhr.onload = function() { 
	            //alert("上傳完成!");  
	        };  
	                //監聽progress事件  
	        xhr.upload.addEventListener("progress", 
	        		function(evt){
			        	if (evt.lengthComputable) {  
				            var procce = Math.round(evt.loaded / evt.total * 100);//計算進入百分比
				            updataprocess(i,procce);//這個是自己寫的一個更新進度條的方法，這裡你們自己實現然後更新介面的進度條
				        }  
	        		}
	        , false);  
	        xhr.send(form);  
	    }  

以後有在遇到一些以上方法滿足不了的情況再繼續更新