본문 바로가기
JSP

JSP 데이터 요청 (get, post) 방식

by code2772 2022. 11. 18.

[ 목차 ]

    728x90
    반응형

    ✔ 데이터 요청 - get 방식

    데이터 요청
    
            get 방식
            - 간단한 요청을 보낼 때 사용
            - 내용의 크기가 제한적
            - 데이터가 노출(URL)
            - URL뒤에 전송할 데이터를 붙여서 보냄
            - 단순히 서버에게 자원을 요청할 때 사용
            - 전송과 응답의 속도가 빠름
    

     

    ✔ get 예제 코드 1

    <%@ page language="java" contentType="text/html; charset=UTF-8"
            pageEncoding="UTF-8"%>
    
    
    <%-- ❗        <%@ page ~~~ %> : 페이지 무조건 최상단, 정보를 설정하는 페이지
            language : 사용할 프로그래밍 언어, java를 사용
            contentType : 생성할 문서의 컨텐츠 유형, HTML 사용
            pageEncoding : 문자 인코딩을 설정 -> UTF-8을 사용한다.❗  --%>
    
    
    <%
    //         사용자가 서버쪽으로 전달할 경우 인코딩을 설정하겠다. 
            request.setCharacterEncoding("UTF-8");
            String userid = request.getParameter("userid");
            String userpw = request.getParameter("userpw");
    //         입력한 값을 변수에 저장하여 폼태그에 전달
            %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>전송방식(get)</title>
    <!-- URL에 저장되는 방식 -->
    </head>
    <body>
    <h2>전송방식</h2>
    
    <p>아이디 : <%=userid %></p>
    <p>비밀번호 : <%=userpw %></p>
    </body>
    </html>

     

    ✔ get 예제 코드 2

    <%@ page language="java" contentType="text/html; charset=UTF-8"
            pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>전송방식(get)</title>
    </head>
    <body>
    <h2>전송방식(get)</h2>
    
    <!--   사람눈에 보이고 보안은 취약하지만 속도는 post에 비해 빠르다는 장점을 가지고 있다 -->
    
    <form method="get" action =" 2_get_or.jsp">
    <p>아이디 : <input type = "text" name = "userid"></p>
    
    <!-- userid, userpw 등 내가 입력한 내용 즉 벨류값을 알 수 있다 -->
    
    <p>비밀번호 : <input type = "password" name = "userpw"></p>
    <p><input type = "submit" value="로그인"></p>
    </form>
    <p><a href ="2_get_or.jsp?userid=banana&userpw=2222">바나나 전송</a></p>
    </body>
    </html>

     

    🔏 get 방식 -  URL내 전송 내용이 사람눈에 보이고 보안은 취약하지만 속도는 post에 비해 빠르다는 장점을 가지고 있다

     

    반응형

     

    ✔ 데이터 요청 - post 방식

    post 방식
    - 복잡한 요청을 보낼 때 사용
    - 전송할 데이터를 body에 넣어서 요청
    - 데이터를 body에 넣어서 요청하기 때문에 노출되지 않음
    - 내용의 크기 제한이 없음
    - get방식에 비해 속도가 느림

     

    ✔ post예제 코드 1

     

    <%@ page language="java" contentType="text/html; charset=UTF-8"
            pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>전송방식</title>
    </head>
    <body>
    <h2>전송방식(post)</h2>
    
    <!--   포스트 방식은 내가 보낸 내용을 url에 보내지 않는다. 사람눈에 보이지 않다
            get 방식보다 전송속도는 느리다.  -->
    
    <form method="post" action =" 3_post_or.jsp">
    <p>아이디 : <input type = "text" name = "userid"></p>
    <p>비밀번호 : <input type = "password" name = "userpw"></p>
    <p><input type = "submit" value="로그인"></p>
    </form>
    <p><a href ="3_post_or.jsp?userid=banana&userpw=2222">바나나 전송</a></p>
    </body>
    </html>

     

    ✔ post예제 코드 1

    <%@ page language="java" contentType="text/html; charset=UTF-8"
            pageEncoding="UTF-8"%>
    <%
    //         사용자가 서버쪽으로 전달할 경우 인코딩을 설정하겠다. 
            request.setCharacterEncoding("UTF-8");
            String userid = request.getParameter("userid");
            String userpw = request.getParameter("userpw");
    //         입력한 값을 변수에 저장하여 폼태그에 전달
            %>
    <!DOCTYPE html>
    <html>"WebContent/4_member_ok.jsp"
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <h2>전송방식</h2>
    <p>아이디 : <%=userid %></p>
    <p>비밀번호 : <%=userpw %></p>
    </body>
    </html>

     

    🔏 post 방식 -  포스트 방식은 내가 보낸 내용을 url에 보내지 않는다. 사람눈에 보이지 않다 get 방식보다 전송속도는 느림

     

     

    ✔ 데이터 요청 방식 -  과제

    과제.
    자바스크립트 시간에 만든 회원가입.html을 4_member.jsp로 변경하고 입력한 데이터를
    4_member_ok.jsp에서 출력하는 서버 페이지를 작성해보자
    단, 취미는 request.getParameterValues()를 통해서 전송받음
    ----------------------------
    배열로 저장됨 -> 출력 시 반복문을 사용하면 된다.
    

     

    ✔ 과제 - 입력부분

    <%@ 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>
    <style >
    body{background-color : deeppink}
            h2, p{
            text-align:center;
            margin:20px;
            }
    </style>
    </head>
    <body>
    <h2>전송방식 과제(post)</h2>
    <!--   포스트 방식은 내가 보낸 내용을 url에 보내지 않는다. 사람눈에 보이지 않다 -->
    <form method="post" action =" 4_member_ok.jsp">
    <p>아이디 : <input type="text" name = "userid" ></p>
    <p>비밀번호 : <input type="password" name = "userpw" > </p>
    <p>비밀번호 확인 : <input type="password" name = "userpw_re" > </p>
    <p>이름 : <input type="text" name="name" ></p>
    <p>휴대폰 번호 : <input type="text" name="hp" ></p>
    <p>이메일 : <input type="text" name="email""></p>
    <p>성별 :<label> 남자 <input type="radio" name="gender" value="남자" checked></label> <label> 여자 <input type="radio" name="gender" value="여자"></label></p>
    <p>취미 :  <label>등산<input type="checkbox" name="hobby" value="등산"></label>
    <label>게임<input type="checkbox" name="hobby" value="게임"></label>
    <label>영화감상<input type="checkbox" name="hobby" value="영화감상"></label>
    <label>드라이브<input type="checkbox" name="hobby" value="드라이브"></label>
    <label>운동<input type="checkbox" name="hobby" value="운동"></label></p>
    
    <p>우편번호: <input type="text" name="zipcode" maxlength="5" id="sample6_postcode" ><button type="button" onclick="sample6_execDaumPostcode()">검색</button></p>
    <p>주소 <input type="text" name="sample6_address"></p>
    <p>상세주소 <input type="text" name="sample6_detailAddress"></p>
    <p>참고사항 <input type="text" name="sample6_extraAddress"></p>
    <p><input type = "submit" value="가입완료"></p>
    </form>
    </body>
    </html>

     

    ✔ 과제 - 받는부분

    <%@ page language="java" contentType="text/html; charset=UTF-8"
            pageEncoding="UTF-8"%>
    <%
    //         사용자가 서버쪽으로 전달할 경우 인코딩을 설정하겠다. 
            request.setCharacterEncoding("UTF-8");
            String userid = request.getParameter("userid");
            String userpw = request.getParameter("userpw");
            String userpw_re = request.getParameter("userpw_re");
            String name = request.getParameter("name");
            String hp = request.getParameter("hp");
            String email = request.getParameter("email");
            String gender = request.getParameter("gender");
           
           /* getParameterValues() 사용하여 배열로 이용하여 여러 값을 저장가능!!
              이 후 for문을 활용하여 선택한 배열들을 출력하는 방법을 사용하였다.*/
    
            String hobby[] = request.getParameterValues("hobby");
            String zipcode = request.getParameter("zipcode");
            String sample6_address = request.getParameter("sample6_address");
            String sample6_detailAddress = request.getParameter("sample6_detailAddress");
            String sample6_extraAddress = request.getParameter("sample6_extraAddress");
    //         입력한 값을 변수에 저장하여 폼태그에 전달
            %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style >
       h2, p{
                text-align:center;
                margin:20px;
                }
                body{background-color : deepskyblue}
    </style>
    </head>
    <body>
    <h2>전송방식</h2>
    <p>아이디 : <%=userid %></p>
    <p>비밀번호 : <%=userpw %></p>
    <p>비밀번호 확인 : <%=userpw_re %></p>
    <p>이름 : <%=name %></p>
    <p>휴대폰 번호 : <%=hp %></p>
    <p>이메일 : <%=email %></p>
    <p>성별 : <%=gender %></p>
    <p>취미 :   <% for(String s: hobby) out.print(s + " !  "); %></p>
    <p>우편번호 : <%=zipcode %></p>
    <p>주소 : <%=sample6_address %></p>
    <p>상세주소 : <%=sample6_detailAddress %></p>
    <p>참고사항 : <%=sample6_extraAddress %></p>
    
    </body>
    </html>

     

    🔏 getParameterValues() 사용하여 배열로 이용하여 여러 값을 저장가능!!   이 후 for문을 활용하여 선택한 배열들을 출력하는 방법을 사용하였다.

     

    반응형