第九章 Ajax
Ajax程式和伺服器資料傳輸

在進行Ajax操作時，SpringMVC會需要將JSON資料和Java實體類進行相互轉換，為了實現這個效果需要額外加入jackson-all-1.9.11.jar

1.從瀏覽器傳送資料給handler方法
1請求引數分散提交

頁面：

<button id="btn1">實驗1：傳送零散資料</button>

jQuery:

<script type="text/javascript" src="${pageContext.request.contextPath }/jQuery/jquery-3.2.1.js"></script>
<script type="text/javascript">
	$(function(){
		$("#btn1").click(function(){
			//實驗1：傳送零散資料
			//請求地址
			var url = "${pageContext.request.contextPath }/one";
			
			//請求引數
			var param = {"empId":20,"userName":"tom","random":Math.random()};
			
			//伺服器端成功返回響應後的回撥函式
			var callBack = function(response){
				console.log(response);
			};
			
			//伺服器端返回的響應體資料的解析方式
			var type = "text";
			
			//傳送POST方式的Ajax請求
			$.post(url, param, callBack, type);
		});
	});
</script>
 

handlers:

//@ResponseBody表示使用handler方法的返回值作為響應體，不再前往任何一個檢視
	@ResponseBody
	
	//使用produces="text/html;charset=UTF-8"設定解決響應資料亂碼問題
	//如果是JSON資料內容型別是：application/json
	@RequestMapping(value="/one",produces="text/html;charset=UTF-8")
	public String one(
				@RequestParam("empId") Integer empId, 
				@RequestParam("userName") String userName) {
		
		System.out.println("empId="+empId);
		System.out.println("userName="+userName);
		
		return "執行成功！！！";
	}
 

在這個例子中，handler方法接收資料和之前是沒有什麼區別的，新的知識點是@ResponseBody註解。這個註解的作用是把當前handler方法的返回值直接作為響應資料返回給瀏覽器而不是進行檢視名稱的解析。

2傳送對應POJO的資料
頁面：

<button id="btn2">實驗2：傳送對應POJO的資料</button>

jQuery:

$("#btn2").click(function(){
		//實驗2：傳送對應POJO的資料
		var url = "${pageContext.request.contextPath }/two";    			
		var param = {
				"stuId":5,
				"stuName":"jerry",
				"stuSubject":"java",
				"random":Math.random()
			};    			
		var callBack = function(response){
			console.log(response);
		};    			
		var type = "text";    			
		//傳送POST方式的Ajax請求
		$.post(url, param, callBack, type);
});
 

handlers:

@ResponseBody
	@RequestMapping(value="/two",produces="text/html;charset=UTF-8")
	public String two(Student student) {
		
		System.out.println(student);
		
		return "執行成功！！！";
	}

這裡又用到了@RequestBody註解，它的作用是把請求體中的JSON資料轉換成我們指定的資料型別。同時在@RequestMapping註解上我們額外增加了produces屬性用來指定響應體資料的編碼方式，以此來解決響應資料的字元亂碼問題。

大家可以記住這個結論：使用@ResponseBody返回響應資料時，需要在@RequestMapping註解中使用produces="application/json;charset=UTF-8"來解決字符集問題。
3傳送JSON請求體

<button id="btn3">實驗3：傳送JSON請求體</button>

jQuery:

$("#btn3").click(function(){
	//1.建立陣列物件
	var stuArray = new Array();
	//2.準備要存入陣列的資料
	var stu01 = {"stuId":11,"stuName":"tom11","stuSubject":"php11"};
	var stu02 = {"stuId":22,"stuName":"tom22","stuSubject":"php22"};
	var stu03 = {"stuId":33,"stuName":"tom33","stuSubject":"php33"};
	//3.存入陣列
	stuArray.push(stu01);
	stuArray.push(stu02);
	stuArray.push(stu03);
	//4.將陣列物件轉換成字串
	var requestBodyData = JSON.stringify(stuArray);
	//5.傳送Ajax請求
	$.ajax({
		"url":"${pageContext.request.contextPath }/three",	//請求地址
		"contentType":"application/json;charset=UTF-8",		//請求體的內容型別
		"data":requestBodyData,								//傳送給伺服器的資料，將來的請求體
		"dataType":"text",									//預期伺服器返回的響應體型別
		"success":function(response){console.log(response)},//伺服器成功返回響應後的回撥函式
		"type":"POST"										//傳送請求的請求方式
	});
});

handlers:

@ResponseBody
@RequestMapping(value="/three",produces="text/html;charset=UTF-8")
//@RequestBody將請求體的JSON資料轉換為Java型別
public String three(@RequestBody List<Student> stuList) {    	
	for (Student student : stuList) {
		System.out.println(student);
	}
	
	return "執行成功！！！";
}

4.接收文字

<button id="btn4">實驗4：接收文字</button>

jQuery:

$("#btn4").click(function(){
	//實驗4：接收文字
	var url = "${pageContext.request.contextPath }/four";
	var callBack = function(response) {
		console.log(response);
		console.log(response.stuName);
	};
	
	//如果伺服器返回的是JSON字串，但是type="text"，那麼response將僅僅是一個字串，
	//不能直接訪問JSON資料的屬性
	var type = "text";
	$.post(url, callBack, type);
});

handlers:

@ResponseBody
@RequestMapping(value="/four",produces="text/html;charset=UTF-8")
public String five() {
	return "來自伺服器端的迴應……";
}

5.接收JSON

實驗5：接收JSON

JQuery:

	$("#btn5").click(function(){
		//實驗5：接收JSON
		var url = "${pageContext.request.contextPath }/five";
		var callBack = function(response) {
			console.log(response);
			console.log(response.stuName);
			//如果伺服器返回的響應體資料無法解析為JSON資料，那麼後續操作無法執行，而且沒有錯誤提示。
			//console.log("aaaaaaaaaa........");
		};
		
		var type = "json";
		$.post(url, callBack, type);
	});

handlers：

@ResponseBody
@RequestMapping(value="/five",produces="application/json;charset=UTF-8")
public Student four() {
	return new Student(55, "stuName555", "stuSubject555");
}

接收伺服器返回的資料時一定要讓jQuery的解析方式和實際返回資料的格式一致。

@PathVariable和@RequestParam

/emp/remove/23
@PathVariable(“empId”)

/emp/remove?empId=23
@RequestParam(“empId”)