JS 시험으로 구현한 회원등록 폼에 서블릿과 JSP를 적용해 컨트롤러에서 자바객체를 받아와 화면에 표현해 보았다.👀

서버(Application server)

---

• 클라이언트에서 보낸 데이터를 어떻게 수집할것인가?
• request를 파악하고 처리
• 결과를 다시 클라이언트에게 전송 → response + 데이터
• 클라이언트에게 어떤 식으로 보낼 것인가? ⇒ 큰 주제
  • 왜? 클라이언트 기술은 html기술인데, html은 정적이라서 데이터를 처리하지 못함
  • 고정되어 있는 것에 어떻게 보내야하는지가 문제
  • html만으로 한계 → ajax등장
    • ajax의 단점: 자바 객체를 json 객체로 바꿔줘야 함(spring에서는 자동이긴 함)

자바 객체가 html에서 처리가 안되니 동적 처리를 위해 servlet 기술이 나옴

• servlet는 데이터핸들링만하지 html 태그 영향 주는 목적이 아니므로, JSP가 등장함
• servlet은 서버에서 사용되고, 프론트에서는 사용 안되게 되었음
• JSP와 서버는 네트워크가 떨어져있으므로 데이터를 JSP로 보내는 기술을 알아야 함

주제

1. 클라이언트에서 데이터를 보낼 때 데이터를 꺼내는 법
2. 데이터를 처리한 다음 결과를 클라이언트에 보내는 법(by. Jsp)

웹에서 정보 주고 받기

---

key - value 방식으로 정보가 주고받아짐

html에서 key값을 나타내는 것은 name 속성

명령 : get

데이터 보내기: post

서블릿 페이지를 web.xml에서 정의하여 URL확인한다

get방식은 get에 대응되는 method를 override해야하고, post도 post에 맞는 method를 override해야한다.

클라이언트에서 데이터 보낼땐 key-value방식으로 처리애햐 한다.

컨트롤러 리다이렉트

• 폼화면에서 제출되고 나서 다른 화면으로 리다이렉트 하기

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//...
		
		resp.sendRedirect("member/view_update.jsp");
}

JSP

• 객체 생성할 필요없이 가장 많이 쓰는 8가지 객체 기본으로 재공
• HTTPServeletReq → request라는 내장 객체로 사용 가능

데이터 동적으로 처리하기 위해 AJAX

여러개의 데이터를 보내고 싶고 & 외부에 데이터 내용을 알리고 싶지 않을 때

→ 객체 자체를 보내야함(데이터 객체)

page1 → request → servlet → res → page2

여러개의 데이터를 보낼 때는 데이터를 보낼수 잇는 방법이 없기 떄문에

page2에 servelet에서 데이터 객체를 보냄(JSON 형태로 ..?)

컨트롤러 → 다른 페이지로 데이터 보내기 (객체)

public class MemberController extends HttpServlet {
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		System.out.println("hello");
		String userId = req.getParameter("userId");
		String pwd = req.getParameter("pwd1");
		String name = req.getParameter("userName");
		String zipCode = req.getParameter("zipCode");
		String addr1 = req.getParameter("addr1");
		String addr2 = req.getParameter("addr2");
		String year = req.getParameter("year");
		String month = req.getParameter("month");
		String day = req.getParameter("day");
		String gender = req.getParameter("gender");
		String[] interests = req.getParameterValues("interests");
		String introduce = req.getParameter("introduce");
		
		TestVO test = new TestVO(userId, pwd, name, zipCode, addr1, addr2,
				year,month, day, gender, interests, introduce);
		req.setAttribute("test", test);
//		resp.sendRedirect("member/view_update.jsp?user_id="+userId);
//		resp.sendRedirect("member/view_update.jsp"); //새로운 req가 생성되서 날라가기 때문에 여기서 매개변수로 받은 req는 적용되지 않음
		RequestDispatcher rd= req.getRequestDispatcher("./member/view_update.jsp"); // 서블릿의 주소로 이동됨
		rd.forward(req, resp);
	}

JSP에서 객체 받기

<%
	// scriptlet : 여기에서 자바 사용가능
	// 서블릿에는 문자열로 일일이 태그 다 적어줘야하므로s 서블릿 안쓰게 되었음 -> JSP 만들어짐
	// 클래스를 통해 확장이 가능함
	// String id = request.getParameter("userId");
	// out.print("<h1>" + id + "</h1>"); // out: 브라우저
	TestVO test = (TestVO)request.getAttribute("test");
	String id = test.getId();
	String pwd = test.getPwd1();
	String name = test.getName();
	String zipCode = test.getZipCode();
	String addr1 = test.getAddr1();
	String addr2 = test.getAddr2();
	String year = test.getYear();
	String month = test.getMonth();
	String day = test.getDay();
	String gender = test.getGender();
	String[] interests = test.getInterests();
	String introduce = test.getIntroduce();
	%>

<script type="text/javascript">
			
			// 라디오버튼 성별 체크
   		if (<%=gender%>.value == "male"){
   			$("#male").prop("checked", true);
   		} else {
   			$("#female").prop("checked", true);
   		};
   		
   		let arr = [<% for (int i = 0; i < interests.length; i++) { %>
                     '<%= interests[i] %>'
                      <% if (i < interests.length - 1) { %>
                      ,<% } %>
                  <% } %>];
   		// 취미 체크 박스
   		for(let i of arr){
   			$('#'+i).prop("checked", true)
   		}
   		
			// 홈으로 버튼 클릭시 페이지 이동
   		$("#home").click(function(e){
   			e.preventDefault();
   			location.href = "./member/user_regist_ex.html";
   		})

</script>