Submit 값 유지 - Submit gabs yuji

Question

%>

6요소의 submit처리에 의해 호출된 action 페이지는 요청에 따른 프로그램 로직을 수행한 후 결과 표시를 위한 페이지로 이동해야 한다. 이때 action 페이지가 브라우저의 히스토리에 남지 않도록 하기 위해

3태그를 이용한 방식을 사용해야 한다.

목차 Show

🎈 object.jsp
🎈 object_ok.jsp 로 이동 됨
✨object_ok.jsp 에서 forward 방식으로 페이지 이동하기
🎈object_result.jsp 에서 출력하기
✨object_ok.jsp 에서 redirect 방식으로 페이지 이동하기
(1) submit데이터 출력해보기
(2) form 동작 멈추게 하기

서버와 클라이언트의 간 정보 이동은 Request와 Response를 통해 주고 받게 되는데 JSP와 Servlet에선 내장 객체로 Request와 Response를 기본적으로 제공해준다.

서버는 Request를 통해서 데이터를 받거나, Response를 통해서 클라이언트 측으로 데이터를 보내고, 페이지 이동시에도 두가지 내장객체를 이용해 데이터를 담아서 주고 받을 수 있다.

🎈 object.jsp

🎈 object_ok.jsp 로 이동 됨

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here


 이름 :		<%=request.getParameter("username") %>

 아이디 :	<%=request.getParameter("userid") %>

request 객체로 파라미터값 받아오기
object.jsp 파일과 object_ok.jsp 파일에서 변수 이름을 동일하게 했는데,
변수 이름과 태그의 name명, id값, DB 컬럼명이 같아야 유지보수가 수월하다.

✨object_ok.jsp 에서 forward 방식으로 페이지 이동하기

forward 방식 : request 객체 유치
redirect 방식 : request 객체 재생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here



 <% String username = request.getParameter("username");
 	String userid = request.getParameter("userid"); 
	
 	pageContext.forward("object_result.jsp");
 %>

object.jsp파일에서 파라미터로 받은 값을 변수에 담아서 다시
object_result.jsp 파일로 페이지 이동!
forward 방식으로 페이지 이동했기 때문에, request와 reponse 값 유지!
페이지 이동 후 url은 변화 없음!!

🎈object_result.jsp 에서 출력하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here


이름 : <%=request.getParameter("username") %>님 어서오세요.

당신의 아이디는 <%=request.getParameter("userid") %> 입니다.

forward로 페이지 이동했기 때문에, request 객체에 정보가 유지되어 넘어온다.

✨object_ok.jsp 에서 redirect 방식으로 페이지 이동하기

forward 방식 : request 객체 유치
redirect 방식 : request 객체 재생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here



 <% String username = request.getParameter("username");
 	String userid = request.getParameter("userid"); 
	
 	//pageContext.forward("object_result.jsp");
 	response.sendRedirect("object_result.jsp");
 %>

redirect 방법은 request 유지되지 않아서 Null로 출력됨.

[JavaScript] form태그, Local Storage 사용 해보기

12 Aug 2021 in JavaScript on Study

1️⃣ 폼(form)이란?

form태그를 이용하면서버에입력한 데이터를 전송할 수 있습니다. 한가지 사용예로는 로그인창에서 아이디와 비밀번호를 입력받는 경우를 들 수 있습니다.
다음은 간단한 사용 예시입니다.

<form action="xxx.php">
  <input type="text" name="id" />
  <input type="text" name="email" />
  <input type="submit" />
</form>

위의 간단한 예시를 살펴보면 form태그 안의 입력값들을 xxx.php서버로 보내줍니다.
```
<form id="login">
  <input type="text" />
  <input type="submit" />
</form>
```
0를 이용하면 아래와 같이 사용자가 입력할 수 있는 텍스트가 생깁니다.

```
<form id="login">
  <input type="text" />
  <input type="submit" />
</form>
```
1을 사용하면 아래와 같이 서버에 입력값을 전송할 수 있는 버튼이 생깁니다.

만약

<form id="login">
  <input type="text" />
  <input type="submit" />
</form>

2이 겹치게 되면 서버에서 구분할 수 있도록 적절한

<form id="login">
  <input type="text" />
  <input type="submit" />
</form>

3을 지어주는 것이 좋습니다.

```
<form id="login">
  <input type="text" />
  <input type="submit" />
</form>
```
2의 옵션은 여러가지가 있는데 아래의 사이트에 자세히 설명되어 있습니다.
👉🏻 👉🏻 👉🏻 w3schools.com - HTML Input Types

2️⃣ 제출(submit)되는 데이터 읽어보기

(1) submit데이터 출력해보기

아래는 입력받아 서버에 submit(제출) 하는 예제입니다.

<form id="login">
  <input type="text" />
  <input type="submit" />
</form>

javascript에서 form 요소에 접근하여 서버에 보낼 데이터가 무엇인지 알 수 있습니다.

이 데이터를

<form id="login">
  <input type="text" />
  <input type="submit" />
</form>

5를 이용하여 출력해보도록 하겠습니다.

const login = document.querySelector("#login");
const loginInput = document.querySelector("#login input");

function onLogin() {
  const text = loginInput.value;
  console.log(text);
}

login.addEventListener("submit", onLogin);

하지만

<form id="login">
  <input type="text" />
  <input type="submit" />
</form>

6정도 잠깐 console창에 출력되고 사라졌습니다.

그 이유는
```
<form id="login">
  <input type="text" />
  <input type="submit" />
</form>
```
7태그에서
```
<form id="login">
  <input type="text" />
  <input type="submit" />
</form>
```
8을 하게되면 브라우저가 감지하여 자동으로 서버로 입력 데이터를 보내줍니다. 이 과정에서 자동으로 창이 새로고침 되기 때문입니다.

(2) form 동작 멈추게 하기

제대로 출력값을 보기 위해서는form의 동작을 멈추게 해야됩니다.

위의 예시에서

<form id="login">
  <input type="text" />
  <input type="submit" />
</form>

9를 직접다루는 함수인

const login = document.querySelector("#login");
const loginInput = document.querySelector("#login input");

function onLogin() {
  const text = loginInput.value;
  console.log(text);
}

login.addEventListener("submit", onLogin);

0함수에 다음과 같이 코드를 추가해 주면됩니다.

function onLogin(event) {
  event.preventDefault();
  const text = loginInput.value;
  console.log(text);
}

javascript만의 방법으로

const login = document.querySelector("#login");
const loginInput = document.querySelector("#login input");

function onLogin() {
  const text = loginInput.value;
  console.log(text);
}

login.addEventListener("submit", onLogin);

1라는 인자를 받아올 수 있습니다. 이

const login = document.querySelector("#login");
const loginInput = document.querySelector("#login input");

function onLogin() {
  const text = loginInput.value;
  console.log(text);
}

login.addEventListener("submit", onLogin);

1는

const login = document.querySelector("#login");
const loginInput = document.querySelector("#login input");

function onLogin() {
  const text = loginInput.value;
  console.log(text);
}

login.addEventListener("submit", onLogin);

3을 하면서 발생한 이벤트에 대한 정보를 담고 있습니다.

function onLoginSubmit(event) {
  event.preventDefault();
  const text = loginInput.value;
  console.log(text);
}

이제 새로고침(서버로 데이터 전송)이 멈추고 정상적으로 console출력이 되었습니다.

const login = document.querySelector("#login");
const loginInput = document.querySelector("#login input");

function onLogin() {
  const text = loginInput.value;
  console.log(text);
}

login.addEventListener("submit", onLogin);

4를 이용하여 입력 데이터를 얻어올 수 있습니다.

const login = document.querySelector("#login");
const loginInput = document.querySelector("#login input");

function onLogin() {
  const text = loginInput.value;
  console.log(text);
}

login.addEventListener("submit", onLogin);

1요소를 출력해보면 다음과 같이 출력 됩니다.

/* 코드 생략 */
console.dir(event);

3️⃣ Local Storage 사용해보기

브라우저에서 지원하는 일종의 미니DB와 같은 기능(API)을 합니다. 동일 컴퓨터 동일 브라우저를 이용하면 Local Storage에 저장된 값이 그대로 유지됩니다.
자세한 설명은 아래의 사이트에 잘되어 있습니다.
👉🏻 👉🏻 👉🏻 zerocho.com - 로컬스토리지, 세션스토리지

const login = document.querySelector("#login");
const loginInput = document.querySelector("#login input");

function onLogin() {
  const text = loginInput.value;
  console.log(text);
}

login.addEventListener("submit", onLogin);

6오브젝트를 이용하면 손쉽게 Local Storage에 key, value값으로 저장을할 수 있습니다.

/* 코드 생략 */

const text = loginInput.value;
localStorage.setItem("username", text);

위와같은 코드 구성으로입력 데이터값을 저장할 수 있습니다. 위에서 말했듯이 Local Storage에 저장된 값이 유지됩니다. 그렇기 때문에 굳이
```
const login = document.querySelector("#login");
const loginInput = document.querySelector("#login input");

function onLogin() {
  const text = loginInput.value;
  console.log(text);
}

login.addEventListener("submit", onLogin);
```
7을 사용하여 전송을 정지시킬 필요가 없이도 값을 저장할 수 있습니다.

< "apple"을 입력>

< Local Storage에 저장된 모습>

4️⃣ 응용 결과물

Log IN(로그인)시

const login = document.querySelector("#login");
const loginInput = document.querySelector("#login input");

function onLogin() {
  const text = loginInput.value;
  console.log(text);
}

login.addEventListener("submit", onLogin);

8으로 입력 데이터를 Local Storage에 저장과 동시에 출력

Log Out(로그아웃)시

const login = document.querySelector("#login");
const loginInput = document.querySelector("#login input");

function onLogin() {
  const text = loginInput.value;
  console.log(text);
}

login.addEventListener("submit", onLogin);

9으로 Local Storage에 저장된 입력 데이터를 제거함과 동시에 출력문을 제거

이처럼저장과 제거가 독립적으로 이뤄지기 때문에 중간에

const login = document.querySelector("#login");
const loginInput = document.querySelector("#login input");

function onLogin() {
  const text = loginInput.value;
  console.log(text);
}

login.addEventListener("submit", onLogin);

7을 사용하여 동작을 멈춘 상태에서 제거동작을 하면 에상치못한 결과가 발생하였습니다.

그렇기 때문에

const login = document.querySelector("#login");
const loginInput = document.querySelector("#login input");

function onLogin() {
  const text = loginInput.value;
  console.log(text);
}

login.addEventListener("submit", onLogin);

7을 사용하지 않고 사용하며

function onLogin(event) {
  event.preventDefault();
  const text = loginInput.value;
  console.log(text);
}

2시 새로고침이 한번 발생하여 서버 전송과정이 일어납니다.

어떤식으로 웹상(프론트엔드)에서 백엔드로 데이터를 주는지 궁금했었는데
```
function onLogin(event) {
  event.preventDefault();
  const text = loginInput.value;
  console.log(text);
}
```
3태그를 이용해서 데이터를 전송할 수 있다는 것을 알게 되었습니다.