- 데이터 전달, post, get2024년 08월 01일
- chantleman
- 작성자
- 2024.08.01.:54
html에서 form 태그는 데이터를 전달해주는 역할을 해줍니다.
따라서 form 태그의 method 속성값인 get과 post를 통해 데이터를 전달해 처리할 수 있습니다.
- GET: 주로 데이터를 조회할 때 사용합니다. URL에 파라미터를 포함할 수 있으며, 이로 인해 요청이 캐시되거나 즐겨찾기 추가가 가능합니다. 보통 doGet 메서드에서 처리됩니다.
- POST: 서버에 데이터를 전송할 때 사용됩니다. URL에 파라미터를 포함하지 않으며, 요청 본문에 데이터를 포함합니다. 보통 doPost 메서드에서 처리됩니다.
get
: read -> 데이터 전송. 헤더를 통해 데이터 읽어옴
링크에 queryString 형태 ( url?name으로 설정한 정보 = 입력양식에 입력된 값 )로 전달
데이터 변경이 없을 때 (목록, 상세)
post
: update -> 데이터 전송. 바디를 통해 데이터 수정 (form으로 데이터 전달)
데이터 변경이 있을 때 (수정, 삭제)
예) 로그인 하면 id, pw는 보이면 안되기때문에 get이 아니라 post로 전달
<form.html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <form action="test.jsp" method="get"> 이름 <input value="홍길동" name="erum"> <br> 별명 <input name="alias"> <input type="button" value="버튼" onclick="btn()"> </form> </body> </html>< test.jsp >
<% String name = request.getParameter("erum"); //홍길동 String alias = request.getParameter("alias"); //별명 %> 나의 이름은 <%= name %> <br> 나의 별명은 <%= alias %><% 안에 자바 코드 %>
<%= 표현식 영역 %>
값 입력하고 제출 버튼 누르면
url에도 입력한 데이터값이 전달된 것을 확인할 수 있음
get형식으로 데이터 전달시 기본적인 인코딩이 적용되어 한글이 깨지지 않지만
post형식으로 데이터가 전달될때 따로 인코딩 처리해줘야함
request.setCharacterEncoding("utf-8");
body와 body 사이를 document라고 함
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> function checkLogin(){ let form = document.loginForm; //2. 아이디 : 4~12자 이내로 입력 let id = form.id.value; console.log("id: ",id); if(id.length<4 || id.length>12){ alert("아이디는 4~12자 이내로 입력가능합니당! "); form.id.select(); //아이디가 드래그 돼있음 return ; //함수 자체를 종료 } //3. 비밀번호: 4자 이상으로 입력 let pw = form.passwd.value; console.log("pw: ",pw); if(pw.length<4){ alert("비밀번호는 4자 이상 입력하세용 !"); form.passwd.select(); return; } //4. 통과했다면 form.submit(); } </script> </head> <body> <form name="loginForm" action="/ch08/validation03_process.jsp" method="post"> <p> 아이디 : <input type="text" name="id" /> </p> <p> 비밀번호 : <input type="password" name="passwd" /> </p> <p> <input type="button" value="전송" onclick="checkLogin()" /> </p> </form> </body> </html>form의 input태그에서 type을 submit으로 하지 않고 script 부분에서 form.submit()을 해주는 이유는 유효성 검사를 하기 위해서!!
input태그에서 submit으로 속성을 주면 alert가 뜨면서 페이지 이동이 일어남
하지만 script에서 form.submit()하게 되면 유효성 검사 통과됐을때만 submit하게 됨!
728x90'js' 카테고리의 다른 글
css (0) 2024.08.02 선택 값 출력(getElement~, querySelector) (1) 2024.08.02 script (1) 2024.08.01 html form 양식 (0) 2024.07.31 html 태그 (0) 2024.07.29 다음글이전글이전 글이 없습니다.댓글