HongCat 개발 스토리

2.JSON객체 이용한 회원정보 리턴받기 본문

Ajax/JSON

2.JSON객체 이용한 회원정보 리턴받기

홍캣 2019. 11. 12. 00:51

2019/11/11 - [Ajax/JSON] - 1. JSON 의 정의, 표기법----> 같은 패키지를 이용해서 프로그램을 작성한다.

 

UserVo.java 코드작성

데이터를 입력하고 꺼내쓸 수 있는 메소드 작성

package json.model.vo;

public class UserVo {
	private int userNo;
	private String userId;
	private String userName;
	private String userAddr;
	
	public UserVo() {
		// TODO Auto-generated constructor stub
	}
	
	public UserVo(int userNo, String userName, String userAddr) {
		this.userNo = userNo;
		this.userName = userName;
		this.userAddr = userAddr;
	}

	public int getUserNo() {
		return userNo;
	}

	public void setUserNo(int userNo) {
		this.userNo = userNo;
	}

	public String getUserId() {
		return userId;
	}

	public void setUserId(String userId) {
		this.userId = userId;
	}

	public String getUserName() {
		return userName;
	}

	public void setUserName(String userName) {
		this.userName = userName;
	}

	public String getUserAddr() {
		return userAddr;
	}

	public void setUserAddr(String userAddr) {
		this.userAddr = userAddr;
	}
	
	
}

 json 폴더의 indexUserJson.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../../js/jquery-2.0.0.js"></script>
<title>jQuery Ajax - json</title>
</head>
<body>
	<!-- ajax와 json을 같이써보깅 -->
	<h2>jQuery ajax - user Json</h2>
	<h3>회원 인덱스 조회</h3>
	<p>회원리스트의 인덱스를 전송해서, 해당 회원정보 리턴받기</p>
	<input type="number" min="0" max="2" id="input1" placeholder="회원리스트 인덱스를 입력하세요">
	<button id="btn1">실행</button>
	<div id="area1" class="area"></div>
	<script>
		$("#btn1").click(function() {
			var index = $("#input1").val();
			$.ajax({
				url : "/indexJsonUser.do", // 보통 url를 쓸때 .do 라고 씀 (규약같은거)
				/* data : "index="+index, 쿼리스트링 방식 */
				data : {index : index}, // json object 방식 (키:값)
				type : "get",
				success : function(data) {
					console.log(data);
					var html = "<table border='1'>";
					/* for (var i in data) {  한개 데이터만 가져오기때문에 for문 필요업뜸*/
					var user = data;           //  여러개일때 for문 쓰고 data[i]
					html += "<tr><td>"+user.userId+"</td>";
					html += "<td>"+user.userName+"</td>";
					html += "<td>"+user.userAddr+"</td></tr>";
					/* } */
					html += "</table>";
					$("#area1").html(html);
				},
				error : function(data) {
					console.log("ajax 처리 실패");
				}
			});
		});
	</script>
</body>
</html>

위의 코드에  data : {index : index} 처럼 json object 방식(키:키값) 데이터를 서블렛으로 넘겨준다.

넘겨준 데이터를 서블렛에서 어떻게 보내는지 아래코드를 작성해서 확인해 본다. 

package json.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONObject;

import json.model.vo.UserVo;

/**
 * Servlet implementation class indexJsonUserServlet
 */
@WebServlet("/indexJsonUser.do")
public class indexJsonUserServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public indexJsonUserServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("UTF-8");
		
		int index = Integer.parseInt(request.getParameter("index"));//인덱스값 전달받음.
		
		List<UserVo> userList = new ArrayList<UserVo>();
	
		// db에 있는 데이터를 가져오는게 아닌 직접 입력한 데이터를 사용.
		userList.add(new UserVo(1, "라이언", "서울"));
		userList.add(new UserVo(2, "튜브", "인천"));
		userList.add(new UserVo(3, "제이지", "제주"));
		
		UserVo user = null;
		JSONObject result = null;
		
		if(index < userList.size()) { 
		// 화면(ajax 에서 보내준 값)에서 보내준 userList 사이즈(3)가 index 보다 작을때
			
			user = userList.get(index);
			
			result = new JSONObject();
			result.put("userId", user.getUserNo()); //제이슨 객체에 데이터를 넣을때는 put을 쓴다.
			result.put("userName", user.getUserName());
			result.put("userAddr", user.getUserAddr());
		}
		response.setContentType("application/json;charset=utf-8");
		                          // 보내주는 데이터가 json이라고 명시해주기
		PrintWriter out = response.getWriter();
		out.println(result.toJSONString());
		// null인 경우 대비
		// out. println(result);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

 위의 코드처럼 JSONObject 객체에 데이터를 넣을 때는 put 메소드를 써준다. json 객체 이므로 (키:값) 의 형태로 데이터가 입력되는 것을 확인 할 수 있다.

 

아래에는 해당 코드들을 실행시킨 결과이다.

회원 인덱스를 통한 회원정보 리턴

'Ajax > JSON' 카테고리의 다른 글

1. JSON 의 정의, 표기법  (0) 2019.11.11
'Ajax/JSON' Related Articles more
Comments