미치게힘든코딩

AOP(Aspect Oriented Programming)  관계지향 프로그래밍

소스 코드의 중복을 줄이고, 필요할 때마다 가져다 쓰는 객체화 기술

즉 공통되는 부분을 따로 빼내어 필요한 시점에 해당 코드를  추가해주는 기술을 AOP라고 함

공통되는 부분을 따로 빼내서 만든 클래스를 Advice 라고하는데 메소드이기도 하다.

객채 생성, 메소드 호출, 예외발생시점등 작업이 시작되는 시점을 Joinpoint

공통 코드를 끼워 넣는 작업을 Weaving

Advice를 어디에 적용할지 결정하는 포인트컷(PointCut : JoinPoint 집합)을 합친것을 Aspect(에스펙트

부가기능을 독립적인 요소로 분리한 아스펙트는 런타임 시에 필요한 위치에 동적으로 참여가능함

Advice를 삽입할 대상객체 TargetObject

대상 객체에 Advice가 적용된 후 생성되는 객체 Proxy

Spring AOP는 메소드 조인포인트만 지원: 동적 프록시 기반으로 지원하여 핵심기능(대상객체)의 메소드가 호출되는 런타임 시점에만 부가기능(어드바이스)를 적용할수 있다.  ///물론 AspectJ는 고급이라 다양하게 할수 있다고 함

AOP설정...

먼저 fom.xml 에 의존성 추가.

<!-- AspectJ Weaver -->
	<!-- weaver는 AOP에서 advice를 핵심 기능에 적용하는 설정 파일이다 -->
	<dependency>
		<groupId>org.aspectj</groupId>
		<artifactId>aspectjweaver</artifactId>
		<version>${org.aspectj-version}</version>
	</dependency>

 servlet-context.xml에 키워 주기.

xmlns:aop="http://www.springframework.org/schema/aop"  1.

하단에 http://www.springframework.org/schema/aop   2.
http://www.springframework.org/schema/aop/spring-aop-4.3.xsd"> 3. 넣기...

빈안에 <aop:aspectj-autoproxy></aop:aspectj-autoproxy> 프록시 작업한다고 신고함.

advice 클래스 만든다......

common 패키지만들고...LogAdvice 클래스만들어서 메소드 printLog()생성

----------------------------------------------------------------------------

root-context.xml. 에도 동일하게 1,2,3 넣기

하단에 프록시 작업한다고 신고하기

<!--AOP XML -->
<bean id="log" class="com.kh.junspring.common.LogAdvice"></bean>
<aop:config>
<aop:pointcut expression="execution(* com.kh.junspring..*Impl.*(..))" id="allPointCut"/>

// Impl 로 끝나는 클래스의 런타임시에 작동하라는 것이다.
<aop:aspect ref="log">
<aop:before method="printLog" pointcut-ref="allPointCut"/>

// Impl 클래스의 printLog의 메소드를 동작시킨다는 것이다.
</aop:aspect>
</aop:config>

원래는 해당파일의 Namespaces탭이 나와야 하는데 안 나와서 수기작성했다....

//댓글목록 출력
	function getReplyList(){		
		var boardNo="${board.boardNo }";
		
		$.ajax({
			url:"/board/replyList.kh",
			data:{
				"boardNo":boardNo
			},
			type:"get",
			success:function(rList){
				var $tableBody=$("#rtb tbody");
				$tableBody.html('');  //댓글 List 누적되지 않게 초기화
				$("#rCount").text("댓글 갯수( " +rList.length+")");  //댓글 갯수구하기...
				if(rList !=null){
					for(var i in rList){
						var $tr=$("<tr>");
						var $rWriter=$("<td width='100'>").text(rList[i].replyWriter);
						var $rContent=$("<td>").text(rList[i].replyContents);
						var $rCreateDate=$("<td width='170'>").text(rList[i].rCreateDate);
						var $btnArea=$("<td width='90'>").append("<button><a href='javascript:void(0);' onclick='modifyView(this,\""+rList[i].replyContents+"\","+rList[i].replyNo+")'>수정</a></button>")
						                                  .append("<button><a href='javascript:void(0);' onclick='removeReplyAjax("+rList[i].replyNo+")'>삭제</a></button>");
						
						$tr.append($rWriter);
						$tr.append($rContent);
						$tr.append($rCreateDate);
						$tr.append($btnArea);
						$tableBody.append($tr);
						
					}
				}			
			},
			error:function(){
				alert("ajax 통신실패!관리자에게  문의하세요!!")
			}			
		});	
	}

댓글 목록 출력할때 리스트 출력했었고 

수정칸에 문구 변경한다.

.append("<button><a href='javascript:void(0);' onclick='modifyView(this,\""+rList[i].replyContents+"\","+rList[i].replyNo+")'>수정</a></button>")

//리플 목록띄우기
		function modifyView(obj, replyContents, replyNo){
			 event.preventDefault();      //링크따라 화면이동하는것을 막아준다.				
			 var $tr=$("<tr>");
			 $tr.append("<td colspan='3'><input type='text' size='50' id='replyContents"+replyNo+"' value='"+replyContents+"'></td>");
			 //문자임을 나타내주기 위해서 "+변수를 요기 안에다 넣어야 한다. +"
			 $tr.append("<td><button onclick='modifyReply(this,"+replyNo+");'>수정</button></td>");
													/*위에서 전달받은 replyNo 와 함수 호출할때 객체 값을 같이 전달함 */
			 console.log($tr[0]);
			 console.log(obj);  //obj는  this를 통해 이벤트가 발생한 태그 this 가 obj로 넘어와서 
			 $(obj).parent().parent().after($tr);  // $tr변수의 값을 함수가 실행된 쪽으로 추가해준다.		
		}

수정버튼을 누르면 수정할수 있는 댓글 칸이 나오는 자바스크립트

function modifyReply(obj, rNo){         //(obj,rNo,bNo,page){			
			var replyContents=$('#replyContents'+rNo).val();				
			// 원래는 게시글과 댓글 넘버가 같이 가야하지만 여기서는 이미 게시글의넘버가 식별이 되어서 댓글의 넘버만 받는다.
			/*form 태그 안 만들고 ajax으로 변경한다.*/
			$.ajax({
				url:"/board/replyModify.kh",
				data:{
					"replyNo" :rNo,
					"replyContents" : replyContents				
				},
				type:"post",
				success : function(data){
					if(data=="success"){
						getReplyList();						
					}else{
						alert("댓글 수정실패");
					};
				},
				error: function(){
					alert("error");
				}
				
			});
			
		}

$tr.append("<td colspan='3'><input type='text' size='50' id='replyContents"+replyNo+"' //append에서 변동하는 replyNo값을 포함해서 id주는 방법

var replyContents=$('#replyContents'+rNo).val();   

// 그걸 읽어 오는 방법

<style >
	span.guide{
		display:none;
		font-size:12px;
		top:12px;
		right:10px;
	}
	span.ok{color: green}
	span.error{color:red}
</style>
</head>
<body>
<h1 align="center">회원가입</h1>
<div class="">
	<form action="/member/register.kh" method="post">
		<table>
			<tr>
				<td> * 아이디</td>
				<td>
					<input type="text" id="memberId" name="memberId">
					<span class="guide ok">이 아이디는 사용 가능합니다.</span>
					<span class="guide error">이 아이디는 사용 할 수 없습니다.</span>
				</td>
			</tr>

$("#memberId").keyup(function(){
	//	$("#memberId").on("blur",function(){	
			var memberId=$("#memberId").val();
			$.ajax({
				url:"/member/checkId.kh",
				type:"GET",
				data:{
					"memberId":memberId
				},
				success:function(data){
					console.log(data);
				
					if(data=="no"){
						$(".error").css("display",'inline');
						$(".ok").css("display","");
					}else{
						$(".error").css("display","");
						$(".ok").css("display",'inline');
					};
				},
				error:function(){
					alert("error");
				}			
				
			});
		});

blur은 포커스가 떠났을때

keyup은 키보드 입력되었다가  뛸때 반응한다. 한글자 계속누르면 이벤트 발생안되었을때...

input은 데이터가 입력되었을때  각각 이벤트 발생이 된다. 글자 하나 입력 및 삭제할때마다 이벤트 발생이된다.

//아이디 검사 ajax버전
	@ResponseBody
	@RequestMapping(value="/member/checkId.kh",method=RequestMethod.GET)
	public String memberIdCheck(
			@RequestParam("memberId") String memberId){
		System.out.println(memberId);
		try {
			Member member = mService.printOneById(memberId); // 기존의 member객체를 받는것
		//	int result=mService.checkDupId(memberId);
		
		if(!(member==null)) {
		//if(result>0) {
			return "no";			
		}else {
			return "yes";
		}	
		}catch (Exception e) {
			return "yes";
		}
	}

String 방식으로 데이터 전송은 같으나...객체를 확인할지, count로 갯수로 값을 받을지는 선택이다.

 .append("<button><a href='javascript:void(0);' onclick='removeReplyAjax("+rList[i].replyNo+")'>삭제</a></button>");

링크 안걸리게 하는 거 한가지 더.....javascript:void(0),

append드로 할때 전달받은 값 넣기 역시 ++임...onclick='removeReplyAjax("+rList[i].replyNo+")'

//댓글 삭제
	function removeReplyAjax(replyNo){
		$.ajax({
			url:"/board/replyDelete.kh",
			data:{"replyNo":replyNo},
			type:"get",
			success:function(data){
				if(data=="success"){
					getReplyList();
				}else{
					alert("댓글 삭제 실패!");
				}				
			},
			error:function(){
				alert("error");
			}
		});
	}

//댓글 삭제- Ajax 버전!!
		@ResponseBody
		@RequestMapping(value="/board/replyDelete.kh", method=RequestMethod.GET)
		public String boardReplyDelete(
				@RequestParam("replyNo") Integer replyNo) {		
			int result=bService.deleteReply(replyNo);			
			if(result>0) {
				return "success";
			}else {		
				return "fail";
			}
		}

<table align="center" width="500" border="1" id="rtb">
<%-- 		<c:forEach items="${rList }" var="reply">
		<tr>
			<td width="100">${reply.replyWriter }</td>
			<td>${reply.replyContents }</td>
			<td colspan="2">${reply.rUpdateDate }</td>
			<td>
				<a href="#"  onclick="modifyView(this,'${reply.replyContents }', ${reply.refBoardNo },${board.boardNo },${page });">수정</a>
															<!-- /reply.replyNo  숫자라서 그냥 넣은것이다./	 -->			
				<a href="#" onclick="removeReply(${reply.replyNo })";>삭제</a>
			</td>
		</tr>
		<tr id="remo" style="display:none;">
			<td colspan="3"><input type="text" size="50" value="${reply.replyContents }"></td>
			<td><button>수정</button></td>
		</tr>
		</c:forEach> --%>	
		<thead>
			<tr>
				<td colspan="4"><b id="rCount"></b></td>  
				<!-- 댓글 갯수 나오는곳 -->
			</tr>
		</thead>
		<tbody>
		</tbody>		
	</table>

forEach 삭제하구 구문변경 한다....html에서의 기재사항이 적어진다.

getReplyList();// 댓글 리스트를 언제든지 가져올수 있도록 앞선 실행요청
	//댓글목록 출력
	function getReplyList(){		
		var boardNo="${board.boardNo }";
		
		$.ajax({
			url:"/board/replyList.kh",
			data:{
				"boardNo":boardNo
			},
			type:"get",
			success:function(rList){
				var $tableBody=$("#rtb tbody");
				$tableBody.html('');  //댓글 List 누적되지 않게 초기화
				$("#rCount").text("댓글 갯수( " +rList.length+")");  //댓글 갯수구하기...
				if(rList !=null){
					for(var i in rList){
						var $tr=$("<tr>");
						var $rWriter=$("<td width='100'>").text(rList[i].replyWriter);
						var $rContent=$("<td>").text(rList[i].replyContents);
						var $rCreateDate=$("<td width='200'>").text(rList[i].rCreateDate);
						var $btnArea=$("<td width='100'>").append("<button><a href='#'>수정</a></button>")
						                                  .append("<button><a href='#'>삭제</a></button>");
						
						$tr.append($rWriter);
						$tr.append($rContent);
						$tr.append($rCreateDate);
						$tr.append($btnArea);
						$tableBody.append($tr);
						
					}
				}			
			},
			error:function(){
				alert("ajax 통신실패!관리자에게  문의하세요!!")
			}			
		});	
	}

리스트를 ajax으로 받는데 계속 변경될수 있도록 앞서 계속 호출하는것

등록할때마다 리스트가 출력되도록  등록 칸에도 메소드명을 적어준다.

리스트가 누적되어 출력되지 않도록 칸 비워주기도 잊지말기!!

//댓글 등록
	$("#rSubmit").on("click",function(){
		var replyContents=$("#replyContents").val();
		var refBoardNo="${board.boardNo }";		
		$.ajax({
			url : "/board/replyAdd.kh",
			data:{
				"refBoardNo" :refBoardNo,
				"replyContents":replyContents,
			
			},
			type:"post",
			success:function(data){
				if(data=="success"){
					alert("댓글등록완료");
				}else{
					alert("댓글등록실패");
				};
				
				getReplyList();   //댓글 등록 완료하면 리스트 출력
			},
			error:function(){
				alert("에러");
			}			
		});
	})

//댓글목록 출력 - Ajax 버전!!
	@ResponseBody
	@RequestMapping(value="/board/replyList.kh", 
			produces = "application/json;charset=utf-8",
			 method=RequestMethod.GET)
	public String boardReplyList(
			@RequestParam("boardNo") Integer boardNo) {
		int bNo=(boardNo==0)?1:boardNo;
		List<Reply> rList=bService.printAllReply(bNo);		
		if(!rList.isEmpty()) {
			Gson gson= new GsonBuilder().setDateFormat("yyyy-MM-dd HH:MM").create(); //날자 형식 변경
			return gson.toJson(rList);
		}		
		return null;		
	}

Gson gson= new GsonBuilder().setDateFormat("yyyy-MM-dd HH:MM").create(); //날짜 형식 변경

	<table align="center" width="500" border ="1">	
		<tr>
			<td>
				<textarea rows="3" cols="55"  name="replyContents" id="replyContents"></textarea>
			</td>
		 	<td>
		 		<button id="rSubmit">등록하기</button>
		 	</td>
<%-- 		<form action="/board/addReply.kh" method="post">	
			<input type="hidden" name="refBoardNo" value="${board.boardNo }">
			<input type="hidden" name="page" value="${page }">		 	
		</form> --%>
		</tr>
	</table>

원래는 form태그로 보냈는데 ajax으로 보낸다....

//댓글 등록
	$("#rSubmit").on("click",function(){
		var replyContents=$("#replyContents").val();
		var refBoardNo="${board.boardNo }";		
		$.ajax({
			url : "/board/replyAdd.kh",
			data:{
				"refBoardNo" :refBoardNo,
				"replyContents":replyContents,
			
			},
			type:"post",
			success:function(data){
				if(data=="success"){
					alert("댓글등록완료");
				}else{
					alert("댓글등록실패");
				};
			},
			error:function(){
				console.log("에러");
			}			
		});
	})

form에는 있던 page가 없다.

@ResponseBody
	@RequestMapping(value="/board/replyAdd.kh", method=RequestMethod.POST)
	public String boardReplyAdd(
			@ModelAttribute Reply reply) {
		reply.setReplyWriter("admin");
		int result=bService.registerReply(reply);
		if(result>0) {
			return "success";
		}else {
			return "fail";
		}
		
	}

Jackson과 Gson 모두 Java에 대한 JSON 데이터 바인딩 지원을 제공하는 완전한 라이브러리입니다.

Jackson은 Spring 프레임 워크에 내장되어있지만

Gson은 pom.xml에 따로 추가해 줘야 한다

직렬화, serializing, marshal : java 객체 -> json

역직렬화, deserializing, umarshal : json -> java 객체

	<dependency>
		<groupId>com.google.code.gson</groupId>
		<artifactId>gson</artifactId>
		<version>2.8.5</version>
	</dependency>

빈있어야 한다...

	@ResponseBody
	@RequestMapping(value="/ajax/ex6.kh", produces="application/json;charset=UTF-8", method=RequestMethod.GET)
	public String exerciseAjax6() {
		ArrayList<Member> mList=new ArrayList<Member>();
		mList.add(new Member("khuser01", "pass01"));
		mList.add(new Member("khuser02", "pass02"));
		mList.add(new Member("khuser03", "pass03"));
		mList.add(new Member("khuser04", "pass04"));
		mList.add(new Member("khuser05", "pass05"));
		
		
		//JSONArray jsonArr= new JSONArray();
		/*  GSON을 쓰면 필요 없어진다.
		 * for(Member mOne : mList) { JSONObject jsonObj=new JSONObject();
		 * jsonObj.put("memberId", mOne.getMemberId());
		 * jsonObj.put("memberPwd",mOne.getMemberPwd()); jsonArr.add(jsonObj);
		 * 
		 * } retrun jsonArr.toString();
		 */
		
		Gson gson=new Gson();
		return gson.toJson(mList);
	}

/* 7번 GSON 이용한것  */
	$("#jq-btn7").on("click", function(){
		
		$.ajax({
			url:"/ajax/ex6.kh",
			type:"get",			
			success:function(data){
/* 				data.forEach((member,i)=> {				
				$("#p6").append('<p>'+member.memberId +member.memberPwd+'</p>');	
				});	 */	
				var htmlSTR='';
				for(var i=0;i<data.length;i++){
					htmlSTR+=data[i].memberId +","+ data[i].memberPwd+"<br>";
				}
					$("#p7").html(htmlSTR);
			},
			error:function(){
				console.log("처리실패");
			}
		})
	})

<h4>7. GSON을 이용한 List 변환</h4>
	<p>전체리스트 가져오기</p>
	<p id="p7"></p>
	<button id="jq-btn7">실행 및 결과확인</button>

기본 방법은 밑에 있다...중요한것은 받은걸 화면 출력...나는 FOR문이 약하다..ㅠㅠ

<h4>6. 서버로 전송값을 보내고 JSONArray로 결과 받아서 처리</h4>
	<p>유저 번호를 보내서 해당 유저를 가져오고, 없는 경우 전체리스트 가져오기</p>
	유저 번호 입력 :
	<input type="text" id="find-num">
	<br>
	<p id="p6"></p>
	<button id="jq-btn6">실행 및 결과확인</button>

/* 6번 */
	$("#jq-btn6").on("click", function(){
		var idNum=$("#find-num").val();
		$.ajax({
			url:"/ajax/ex5.kh",
			type:"get",
			data:{"idNum":idNum},
			success:function(data){
/* 				data.forEach((member,i)=> {				
				$("#p6").append('<p>'+member.memberId +member.memberPwd+'</p>');	
				});	 */	
				var htmlSTR='';
				for(var i=0;i<data.length;i++){
					htmlSTR+=data[i].memberId +","+ data[i].memberPwd+"<br>";
				}
					$("#p6").html(htmlSTR);
			},
			error:function(){
				console.log("처리실패");
			}
		})

화면 출력시 forEach문 돌리는 것도 주의 해야함!

@ResponseBody
	@RequestMapping(value = "/ajax/ex5.kh",produces="application/json;charset=UTF-8", method = RequestMethod.GET)
	public String exerciseAjax5(@RequestParam("idNum") String idNum){

		ArrayList<Member> mList=new ArrayList<Member>();
		mList.add(new Member("khuser01", "pass01"));
		mList.add(new Member("khuser02", "pass02"));
		mList.add(new Member("khuser03", "pass03"));
		mList.add(new Member("khuser04", "pass04"));
		mList.add(new Member("khuser05", "pass05"));
		JSONArray jsonArr= new JSONArray(); 
		Boolean check=false;
		for(Member mOne : mList) {	
			if(mOne.getMemberId().equals(idNum)) {
				JSONObject jsonObj=new JSONObject();
				jsonObj.put("memberId", mOne.getMemberId());
				jsonObj.put("memberPwd",mOne.getMemberPwd());	//======>{"memberId":"khuser01","memberPwd":"pass01"}
				jsonArr.add(jsonObj);
				check=true;
				break;
			}
		} 
		if(!(check)) {
				for(Member mTwo : mList) {	
					JSONObject jsonObj=new JSONObject();   
					jsonObj.put("memberId", mTwo.getMemberId());
					jsonObj.put("memberPwd",mTwo.getMemberPwd());	
					jsonArr.add(jsonObj);
				}				
		}
		
		//return jsonArr.toJSONString();
		return jsonArr.toString();

	}

여기서 중요한것은 값을 받아서 없으면 전체 출력 데이터인데 FOR안에 ELSE로 진행했더니 배열값이 5번 출력된다.

밖으로 뽑아서 진행해야 한다. CHECK값으로 부분을 출력한것!!

	<h4>6. 서버로 전송값을 보내고 JSONArray로 결과 받아서 처리</h4>
	<p>유저 번호를 보내서 해당 유저를 가져오고, 없는 경우 전체리스트 가져오기</p>
	유저 번호 입력 :
	<input type="text" id="find-num">
	<br>
	<p id="p6"></p>
	<button id="jq-btn6">실행 및 결과확인</button>

	@ResponseBody
	@RequestMapping(value = "/ajax/ex5.kh",produces="application/json;charset=UTF-8", method = RequestMethod.GET)
	public String exerciseAjax5(){
		ArrayList<Member> mList=new ArrayList<Member>();
		mList.add(new Member("khuser01", "pass01"));
		mList.add(new Member("khuser02", "pass02"));
		mList.add(new Member("khuser03", "pass03"));
		mList.add(new Member("khuser04", "pass04"));
		mList.add(new Member("khuser05", "pass05"));
		JSONArray jsonArr= new JSONArray();        //======> [ ]  배열 생성
		for(Member mOne : mList) {			
			JSONObject jsonObj=new JSONObject();   //======>{ } 객체 생성 / 배열에 전달후 초기화
			jsonObj.put("memberId", mOne.getMemberId());
			jsonObj.put("memberPwd",mOne.getMemberPwd());	//======>{"memberId":"khuser01","memberPwd":"pass01"}
			jsonArr.add(jsonObj);                  //======>[{},{"memberId":"khuser01","memberPwd":"pass01"}.{},...]
		}
		
		//return jsonArr.toJSONString();
		return jsonArr.toString();

	}

기본 배열 출력

	<h1>JSON 개요</h1>
	<p>
		Ajax 서버 통신시 데이터 전송을 위한 포맷 <br> JSON(Javscript Object Notation) :
		자바스크립트 객체 표기법 <br> JSON을 사용하면 모든 데이터형을 서버와 주고 받을 수 있다.(사용목적) <br>
		숫자, 문자열, boolean, 배열, 객체, null <br> '{'으로 시작하여 '}'로 끝나며 그 속에 데이터를
		표기하고 'key : value(값)' 쌍으로 구성된다.
		
	<pre>
		{
			"name" : "이순신",
			"age" : 27,
			"birth" : "1990-01-01",
			"gender" : "남",
			"marry" : true,
			"address" : "서울특별시 중구 인사동",
			"family" : {  
						"father" : "아버지",
						"mother" : "어머니",
						"brother" : "동생"
					}
		}
	</pre>
	</p>

<!-- GSON : List 데이터를 JSON 데이터로 변환해주는 라이브러리 -->
	<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
	<dependency>
		<groupId>com.google.code.gson</groupId>
		<artifactId>gson</artifactId>
		<version>2.8.5</version>
	</dependency>
	<!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple -->
	<dependency>
		<groupId>com.googlecode.json-simple</groupId>
		<artifactId>json-simple</artifactId>
		<version>1.1.1</version>
	</dependency>​

제이슨을 할때 저장시켜야할 것/pom.xml에다 붙여 넣기

2가지로 다른 것이다.  저장 시킨다음 alt +f5로 적용시킬 프로젝트 연결

아니면 프로젝트 우클릭 ->Maven->update project  해주면 된다...

<h4>5. 서버로 전송값 보내고 결과 JSON으로 받아서 처리</h4>
	유저 번호 입력 :
	<input type="text" id="user-num">
	<br>
	<p id="p5"></p>
	<button id="jq-btn5">실행 및 결과확인</button>

	$("#jq-btn5").on("click", function(){
		var userId=$("#user-num").val();
		$.ajax({
			url:"/ajax/ex4.kh",
			type:"get",
			data:{"userId" : userId},
			dataType: "json",
			success:function(result){
				console.log(result);
				$("#p5").html(result.memberPwd);
			},
			error:function(){
				console.log("처리실패");
			}
		})
	})

@ResponseBody
	@RequestMapping(value = "/ajax/ex4.kh",produces="application/json;charset=UTF-8", method = RequestMethod.GET)
	public String exerciseAjax4(
			@RequestParam("userId") String userId){
		JSONObject jsonObj=new JSONObject();  //json 객체생성 ->{}생성완료
		//{"userNo": 1, "userName":"일용자", "userAddr":"서울시 중구"}

		ArrayList<Member> mList=new ArrayList<Member>();
		mList.add(new Member("khuser01", "pass01"));
		mList.add(new Member("khuser02", "pass02"));
		mList.add(new Member("khuser03", "pass03"));
		mList.add(new Member("khuser04", "pass04"));
		mList.add(new Member("khuser05", "pass05"));
		Member member=null;
		for(int i=0;i< mList.size();i++) {
		Member mOne = mList.get(i);		
			if(mOne.getMemberId().equals(userId)) {
				member=mList.get(i);
			}
		}
			jsonObj.put("memberId", member.getMemberId());
			jsonObj.put("memberPwd",member.getMemberPwd());			
		
		return jsonObj.toJSONString();
   }

Member 클래스에 생성자 기본값이 있어야한다.

		//로그인 할때 id와 pwd만 쓰기위해서 한개더 만듬...
	public Member(String memberId, String memberPwd) {
		super();
		this.memberId = memberId;
		this.memberPwd = memberPwd;
	}

요렇게...^^

for문으로 맞는지 확인하는데 문자열이니깐 == 보다는 equals가 맞다......

추가 하자////for문의 다른 표현식

결과는 같음.

데이터 전송

	@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); 

	}