json셋팅

List 데이터를 Json데이터로 변화시켜주는 라이브러리

<!-- 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에 추가한뒤 alt+f5로 메이븐업데이트를 해준다

Json을 활용하여 ajax이용하기

<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>

<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},
		success: function(result){
			$('#p5').html("비밀번호 : "+result.memberPwd)
			
			
		},
		error :  function(){
			console.log("처리 실패")
			
		}
	})
	
})

Controller

@ResponseBody
	@RequestMapping(value = "/ajax/ex4.kh", produces = "application/json;charset=utf-8", method = RequestMethod.GET)
	public String exerciseAjax4(@RequestParam("userId") String memberId) {
		System.out.println(memberId);
		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"));
		mList.add(new Member("khuser06", "pass06"));
		Member member = null;
		for (Member mOne : mList) {
			if (mOne.getMemberId().equals(memberId)) {
				member = mOne;}
		}
		
		System.out.println(member.toString());
		JSONObject jsonObj = new JSONObject();// json객체 생성 -> {} 생성완료
		jsonObj.put("memberId", member.getMemberId());
		jsonObj.put("memberPwd", member.getMemberPw());

		return jsonObj.toString();
	}

• html영역에서 입력받은값은 ajax함수에 data열에 의해 userId라는 이름으로 전송된다
• 해당값은 controller에서 requsetParam으로 전달받고, 여기서는 memberId라는 변수에 저장했다.
• Member에 여러 List를 만들어 전달받은 mebmerId와 저장된 리스트의 memberId를 for문을 활용해 비교한 후 그 값이 일치할때만 member라는 변수에 저장하였다.
• json객체를 만들어 put을 통해 (키값, 저장할값)으로 객체 안에 값을 저장하고 문자로 변환하여 html영역에 리턴하였다.
• html영역에서는 해당값을 result라고 정하고 result안의 json의 키 값임 memberPwd를 입력하여 패스워드값만 출력할수 있도록 하였다.