ajax. jquary로 주고받기

데이터 전송

	@ResponseBody
	@RequestMapping(value = "/ajax/ex1.kh", method = RequestMethod.GET)
	public void exerciseAjax1(@RequestParam("msg") String msg) {
		System.out.println("전송 받은 데이터 : " + msg);

	}

	<h3>Ajax 구현(jQuery)</h3>
	<h4>2. ajax(jQuery)로 서버에 전송값 보내기</h4>
	<p>버튼 클릭시 전송값을 서버에서 출력</p>
	<input type="text" id="msg-2">
	<button onclick="jqueryFunc();">보내기(jQuery)</button>

		function jqueryFunc(){
			var message=  $("#msg-2").val();
			$.ajax({
				url:'/ajax/ex1.kh',
				type : 'get',
				data : {'msg' :message},
				
				success : function(){
					console.log('서버 전송 성공');
				},
				error : function(e){
					console.log('서버 전송 실패 :' +e.toString);
				}
			});
		
		}

@ResponseBody가 들어가야한다...

데이터 수신

<h3>3. 버튼 클릭시 서버에서 보낸 값 수신</h3>
	<button id="jq-btn3">서버에서 보낸값 확인</button>
	<p id="confirm-area"></p>

$("#jq-btn3").on("click",function(){
			$.ajax({
				url:"/ajax/ex2.kh",
				type:"get",
				success: function(result){
					$("#confirm-area").html(result);
				},
				error:function(){
					console.log("처리실패");
				}
			});
		})

@ResponseBody
	@RequestMapping(value = "/ajax/ex2.kh", produces="application/text;charset=UTF-8", method = RequestMethod.GET)
	// 인코딩 에러시에  produces="text/plaint;charset=UTF-8"로 기재해도 된다.
	public String exerciseAjax2(){
		//response.setCharacterEncoding("utf-8");
		return "서버에서 왔습니다.";

	}

 

인코딩 3가지...

1.  본문에..response.setCharacterEncoding("utf-8");

2.  produces="text/plaint;charset=UTF-8"로 기재해도 된다. 샘이 알려주신거

3.  produces="application/text;charset=UTF-8" 검색해서 알아낸것......json타입의 데이터 전송이면 text를 json으로 변경해야 할듯

 

데이터 전송 수신 같이하기.

<h4>4. 서버로 전송값 보내고 결과 문자열 받아서 처리</h4>
	<p>숫자 2개를 전송하고 더한 값 받기</p>
	첫번째 수 :
	<input type="text" id="num-1">
	<br> 두번째 수 :
	<input type="text" id="num-2">
	<br>
	<button id="jq-btn4">전송 및 결과확인</button>
	<p id="p4"></p>

$("#jq-btn4").on("click",function(){
			var num1=$("#num-1").val();
			var num2=$("#num-2").val();
			$.ajax({
				url:'/ajax/ex3.kh',
				typel:'get',
				data:{
					"num1":num1,
					"num2":num2
				},				
				success:function(sum){
					$("#p4").html("연산결과 : "+sum);
					
				},
				error : function(){
					console.log("처리실패");
				}
					
			});
		});

	@ResponseBody
	@RequestMapping(value = "/ajax/ex3.kh", method = RequestMethod.GET)
	public String exerciseAjax3(
			@RequestParam("num1") Integer num1
			,@RequestParam("num2") Integer num2
		){
		
		Integer sum=num1+num2;
		return String.valueOf(sum); 

	}