ajax를 활용하여 json배열에서 값 가지고 오기

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

$('#jq-btn6').on(
				"click",
				function() {
					var memberId = $('#find-num').val();
					$.ajax({
						url : "/ajax/ex5.kh",
						type : "get",
						data : {
							"memberId" : memberId
						},
						success : function(data) {
							var str = "";

							for (var i = 0; i < data.length; i++) {

								str += data[i].memberId + ", "
										+ data[i].memberPw + "<br>"
							}
							$('#p6').html(str);

							console.log(data)
						},
						error : function() {
							console.log("요청실패")

						}

					});

				});

• 버튼을 누르면 '#find-num' 영역에 있는 값을 data를 통해 json형식으로 url입력주소에 get방식으로 전달한다,
• controller가 전송한 값은 success영역에서 data라는 변수에 저장해 for문을 활용하여 반환받은 전달값의 List.size()만큼 반복하여 str변수에 담아 p6영역에 출력한다.
  • jSon형식으로 전달받은 값은 일반적으로 html영역에 출력되지 않는다 키값을 이용해 제대로 값을 분리한 후 변수에 저장해주어야 한다.

Controller

@ResponseBody
	@RequestMapping(value = "/ajax/ex5.kh", produces = "application/json;charset=utf-8", method = RequestMethod.GET)
	public String exerciseAjax5(@RequestParam("memberId") String 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"));

		// json Array로 만들기
		JSONArray jsonArr = new JSONArray(); // [ ]배열생성

		boolean check = false;

		for (Member member : mList) {
			if (member.getMemberId().equals(memberId)) {
				JSONObject jsonObj = new JSONObject();
				jsonObj.put("memberId", member.getMemberId());
				jsonObj.put("memberPw", member.getMemberPw());
				jsonArr.add(jsonObj);
				check = true;
				break;
			}

		}
		if (!check) {
			for (Member member : mList) {
				JSONObject jsonObj = new JSONObject(); // { }객체생성
				jsonObj.put("memberId", member.getMemberId());
				jsonObj.put("memberPw", member.getMemberPw());
				jsonArr.add(jsonObj);
			}

		}

		return jsonArr.toString();
	}

• JSONArray를 활용해 json을 배열로 만들어줬다.
• 만약 html영역에서 보낸값이 mList의 id값과 일치할때는 jsonArr에 들어가는 json객체는 id과 일치하는 mList의 member변수 하나이다.
  • 이 조건이 만족했을때 berak로 반복문을 종료하고 미리 만든 boolean변수 check로 만족했을때를 확인하게 하여 만족한 값이 없을때만 jsonArr안의 json객체의 값이 모든 mList의 값으로 추가되게 하였다.
• 만들어진 JsonArr를 toString()으로 변환하여 다시 html영역으로 보낸다, 해당 값은 ajax에서 success안에 있는 data변수 안에 저장되었다.

Gson을 활용하여 ajax로 값 전달하기

html영역

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

		$('#jq-btn7').on(
				"click",
				function() {
					var memberId = $('#find-num').val();
					$.ajax({
						url : "/ajax/ex6.kh",
						type : "get",
						success : function(data) {
							
							var str = "";

							for (var i = 0; i < data.length; i++) {

								str += data[i].memberId + ", "
										+ data[i].memberPw + "<br>"
							}
							console.log(str)
						},
						error : function() {
							console.log("요청실패")

						}

					});

				});
	</script>

• 이번에는 일방적으로 받아오는 코드이다.
• data로 받아온 배열을 [i]를 활용하여 str변수안에 저장해 콘솔로 출력하였다

Controller

@ResponseBody // 코드 정상이었는데 이거 없어서 전달안됨!!
	@RequestMapping(value = "ajax/ex6.kh", produces = "application/json;charset=utf-8", method = RequestMethod.GET)
	public String exerciseAjax() {

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

		Gson gson = new Gson();
		return gson.toJson(mList); //mList를 json으로 바꿔줌

	}

• Gson을 이용하여 gson.toJson(mList)만으로 배열을 전달하였다.
• 코드는 모두 정상이었는데 Responsbody를 빼먹어서 값이 전달되지 않는 오류가 있었다, 빼먹지 말자!