[Servlet] #05. Form 태그 사용 유무에 따른 링크 전송 방법 / sendRedirect & forward :: Review

Web(Client) -------------------------------------------------------------------------------- >>>  Java(Server)

<a href="hello?name=홍길동&~~~                      String name = request.getParameter("name");

<form action="hello" method="post">                  String name = request.getParameter("name");
<input type="text" name="name" value="홍길동">
</form>

※ Parameter는 무조건 문자열(String)로 넘어간다.

---

■ [예제 1] Form을 쓰지 않았을 때 접근 방법

<input type="text" id="name" value="홍길동">
<button type="button" onclick="btnFunc()">
		
<script>
	function btnFunc() {
		let name = document.getElementById("name");
		location.href = "hello?name=" + name;
	}
</script>

 

■ [예제 2] Form을 썼을 때 접근 방법

<form name="frm">	// 접근 방법이 name이 더 편하다.
	<input type="text" id="name" value="홍길동">
</form>
		
<script>
	function btnFunc() {
		let name = document.frm.name.value;
		location.href = "hello?name=" + name;
	}
</script>

※ 둘 다 기억하기!  예제 1, 2 둘 다 JavaScript이다. 

 

---

■ [예제 3] JQuery로 접근하는 방법 (1) Form 태그를 쓰지 않았을 때 

▶ JQuery는 링크를 사용하다보니 버전이 천차만별이다. 아무튼 엄청 많이 쓰이긴 하다! 

<input type="text" id="name" value="홍길동">
<button type="button" id="btn">
		
<script>
	$(document).ready(function() {		// $(function() ~ 보다 실행되는 것이 더욱 안전적인 방법
		$("#btn").click(function() {
			location.href = "hello?name=" + $("#name").val();
		});
	});
</script>

 

■ [예제 4]  JQuery로 접근하는 방법 (1) Form 태그를 썼을 때

<form id="frm">		// action을 안 정해준 상태
	<input type="text" name="name" value="홍길동">
</form>
<button type="button" id="btn">
		
<script>
	$(function (){
		$("#btn").on("click", function() {
				// (1) 여기서 빈칸, 글자수 검사를 먼저 해주고
					$("#frm").attr("action", "hello").submit();	
                    	// hello는 링크, 이런 경우를 가장 많이 쓴다.
				// (2) 빈칸, 글자수가 모자르다고 하면 여기서 처리.
                   		 // 혹, 위에 action을 적어놓더라도 이것 먼저 실행된다.			
                   		 // (3) 보안적으로 보면 이 구문은 따로 링크가 들어가지 못하도록 빼놓는 경우도 있다.
				});
		});
		</script>

 

※  용도 : 꼭 숙지해야 할 부분! 

- id : JavaScript에서 접근하는 용도 (1개) => JavaScript에서 데이터를 취득하는 용도
- class : CSS 처리 용도
- name = JavaScript 접근 용도 => 링크 접근

 

-

id, class, name 속성의 기능

 

id, class, name과 같은 속성은 element(태그를 element라고 부르겠습니다.)들을 식별해주는 식별자의 기능을 합니다.

식별자가 필요한 이유는 같은 태그인데 다른 용도로 사용하는 경우, 그들을 구분하기 위해 다른 식별자를 부여하여 편리하게 코드를 짜고 관리하기 위해서입니다.

 

0. 셋의 공통점

• javascript에서 식별자로 사용가능합니다.

1. id

• 1개의 html문서에서 1개의 id명은 1개의 태그에만 적용시킬 수 있습니다.
• CSS에서 식별자로 사용 가능합니다.

2. class

• 1개의 html문서에서 1개의 class명은 여러 개의 태그에 적용시킬 수 있습니다.
• 반대로 여러 개의 class명을 1개의 태그에 적용시킬 수 있습니다.
• CSS에서 식별자로 사용 가능합니다.

3. name

• form으로 데이터를 전송할 때 데이터를 식별하는 이름으로 사용됩니다.
• 1개의 html문서에서 1개의 name명은 여러 개의 태그에 적용시킬 수 있지만, 같은 form 내에서는 구별해서 사용해야 합니다.
• CSS에서 식별자로 사용 불가능합니다.

---

■ Web(Client) --------------------------- >>>  Java(Server)  -------------------------- >>>  DB
      JavaScript  ------------------------- >>>  JavaBean(DAO::DB접근::Singleton::MVC Model1)  
                                                                             Controller (MVC Model2 :: Spring 프레임워크)

■  Java(Servlet) ------------------------- >>>  Web(client)
                                  ------------------------- >>>   Java(Servlet)

 

---

■ sendRedirect & forward (★★★)

response.sendRedirect("sampleServlet"); 									
response.sendRedirect("sample.html"); 
// html : 주는건 할 수 있는데 받을 수가 없다.
// (html의 한계, 하지만 유일하게 주고 받을 수 있는 것은 Ajax (JQuery) )					

response.sendRedirect("sample.jsp");
response.sendRedirect("sample.jsp?age=24");		
response.sendRedirect("sampleServlet?age=24");	// 짐을 같이 보내줄 수 있다. 하지만 사용 빈도는 적다
		
// 짐싸!
request.setAttribute("지정 문자열", Object);	
// ( = 짐을 찾을 문자열 (이름표) )
// 하지만, sendRedirect로는 안 간다. 때문에 사용하는 forward!
		
request.RequestDispatcher("sampleServlet").forward(request, response);
request.RequestDispatcher("sample.jsp").forward(request, response);
		
// 짐을 다시 풀 때에는
Object obj = request.getAttribute("지정 문자열");
// 값을 꺼낸다음에 이 것으로 활용할 수 있다.