JSP 예제, get/post방식

Dev/JSP & Servlet

JSP 예제, get/post방식

창문닦이 2019. 2. 14. 18:29

1. JSP를 활용한 회원가입 페이지 만들기

test2.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>회원 가입 페이지</title>
<script type="text/javascript">
function sendIt(){
var f = document.myForm; //window. 맨앞에 생략
if(!f.userId.value){
alert("아이디를 입력!!");
f.userId.focus();
return;
}
if(!f.userPwd.value){
alert("패스워드를 입력하세요");
f.userPwd.focus();
return;
}

alert("회원가입 성공!!");
}
function onlyNum(){
if(event.keyCode<48||event.keyCode>57){//숫자 아스키코드
event.returnValue=false;
}
}
function hangul(){

if(event.keyCode<12592||event.keyCode>12687){//한글 유니코드
event.returnValue=false;
}
}
</script>
</head>
<body>
<form action="" name="myForm" method="post">
아이디 : <input type="text" name="userId"><br/>

패스워드 : <input type="password" name="userPwd"><br/>
이름 : <input type="text" name="userName" onkeypress="hangul();"><br/>

성별 : <input type="radio" name="gender" value="M" checked="checked"> 남자
<input type="radio" name="gender" value="" checked="checked"> 여자<br/>
전화 :
<select name="tel1">
<option value="">선택</option>
<option value="011">011</option>
<option value="010" selected="selected">010</option>
<option value="070">070</option>
</select>
<input type="text" name="tel2" onkeypress="onlyNum();" />
-<input type="text" name="tel3" onkeypress="onlyNum();" /><br/>
동의합니까? <input type="checkbox" name="chk" value="y"/><br/>
메모 : <br/>
<textarea rows="5" cols="20" name="memo"></textarea><br/>
<input type="button" value="회원가입" onclick="sendIt()"/>
<input type="reset" value="다시입력"/>
<input type="button" value="취소"/>
</form>
</body>
</html>

출력 화면

2. JSP 내장객체를 사용해서 연산결과 출력하기

JSP페이지 작성 시 Service 메소드안에 메소드가 들어갈 수 없다.
그래서 jsp <% %>에 !를 넣어서 Service 메소드 안에 저장하지 말고 바깥에 저장하라고 표시해주는 것.
<%@ page contentType="text/html; charset=UTF-8"%>
<%
int a=10, b=5, c;
c=a+b;
%>
<%!
int a=0;
int sum(int x){
int s=0;
for(int i=1; i<=x; i++)
s+=i;

return s;
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
합: <%=a %>+<%=b %>=<%=c %><br/>

<%
String str = String.format("%d+%d=%d", a,b,c);
out.print(str);

out.print("합: " + a + " + " + b + "=" + c +"<br/>");
out.println("합: " + a + " + " + b + "=" + c +"<br/>");
%>
</body>
</html>

출력 화면

3. form태그를 이용하여 데이터 전송하기 - 입력페이지

웹은 정적이다. JSP 페이지에서 만들어진 데이터를 다른 JSP 페이지에서 받아오는 방식을 캐치한다면 다 안것이나 마찬가지이다!

첫번째 방법으로는 form 양식으로 보낸 데이터는 getParameter 로 받는 방법이 있다.

test4.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="test4_ok.jsp" method="post">
수1: <input type="text" name="su1"/><br/>
수2: <input type="text" name="su2"/><br/>

<input type="submit" name="결과"/><br/>
</form>
</body>
</html>

출력 화면

3. form태그를 이용하여 데이터 전송하기 - 출력페이지

test4의 submit을 통해 넘어오는 값(Parameter)을 받아줘야 한다.

request에 su1 , su2가 담겨서 이동. 이때, 넘겨오는 모든 값들은 String으로 넘어온다. response로 처리한 결과값을 응답한다.

test4_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%

/*
String su1 = request.getParameter("su1");
String su2 = request.getParameter("su2");
int s1 = Integer.parseInt(su1);
int s2 = Integer.parseInt(su2);
*/

int s1 = Integer.parseInt(request.getParameter("su1"));
int s2 = Integer.parseInt(request.getParameter("su2"));
String age = request.getParameter("age");
int sum;
sum = s1 + s2;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
합:<%=s1 %> + <%=s2 %> = <%=sum %><br/>
나이: <%=age %>살
</body>
</html>

출력 화면

데이터 전송 method. (Get방식, Post 방식)

post방식이란?

method="post" 데이터를 넘기는 방법. 사용자한테 값을 받을땐 post 방식 이용. form 양식일 경우에는 post방식을 사용한다.

그런데 한글을 넘겨줄 경우 글자가 깨짐. 그럴 경우 인코딩방식을 지정해주면 된다. 매번 작성하는게 번거로우니 기본 템플릿에 지정을 해두는게 편하다. request.setCharacterEncoding("UTF-8");

get방식이란?

method="get" 데이터를 넘길 때 주소에 모든 값을 가지고 넘어감. 데이터가 모두 노출이 된다. 프로그래머가 사용할 땐 get방식을 사용한다.

get방식에서 한글을 사용해야 되는 경우에는 인코딩 - 디코딩 작업이 필요하다.

예를 들어, 네이버에 ‘수지’를 검색할 경우 %EC%88%98%EC%A7%80 가 ‘수지’가 인코딩된 것.

주소 형식)

파일명?변수1=value값&변수2=value값&변수3=value값

예시)

http://192.168.16.16:8080/study/jsp1/test4_ok.jsp?su1=5&su2=88&age=&%EA%B2%B0%EA%B3%BC=%EC%A0%9C%EC%B6%9C

4. 반복문을 이용해서 사용자가 원하는 크기의 테이블 만들기 - 입력값 받기

table.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="table_ok.jsp" method="post">
가로 : <input type="text" name="su1"/><br/>
세로 : <input type="text" name="su2"/><br/>
<input type="submit" name="결과"/><br/>
</body>
</html>

출력 화면

4. 반복문을 이용해서 사용자가 원하는 크기의 테이블 만들기 - 테이블 출력

table_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<%
int su1 = Integer.parseInt(request.getParameter("su1"));
int su2 = Integer.parseInt(request.getParameter("su2"));
int n1 =0;
int n2 =0;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" >

<%
for(int i=1; i<=su1; i++){
out.print("<tr>");//가로
for(int j=1;j<=su2; j++){
n1++;
out.print("<td align='center'>"+ n1 +"</td>");
}
out.print("</tr>");
}
%>
</table>
<br/>

<table border="1" >
<%
for(int i=1; i<=su1; i++){
out.print("<tr>");//가로
for(int j=1;j<=su2; j++){
n2++;
%>
<td width="50" align="center"><%=n2 %></td>
<%
}
%>
</tr>
<%
}
%>
</table>
</body>
</html>

출력 화면

5. 단을 사용자에게 입력받아 구구단 페이지 호출하기 - 입력 페이지

gugudan.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>구구단 입력</title>
</head>
<body>
<form action="gugudan_ok.jsp" method="post">
단: <input type="text" name="dan"></br>
<input type="submit" name="제출">
</form>
</body>
</html>

출력 화면

5. 단을 사용자에게 입력받아 구구단 페이지 호출하기 - 출력 페이지

gugudan_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
int dan = Integer.parseInt(request.getParameter("dan"));
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>구구단 출력</title>
</head>
<body>
<%
for(int i=1; i<=9; i++){
String str = String.format("%d * %d = %d<br/>", dan, i, (dan*i));
out.print(str);
//out.print(dan + "*"+ i+"=" +(dan*i)+"<br/>");
}
%>
</body>
</html>

출력 화면

6. 사용자의 리스트 입력값 받아 결과페이지 호출하기 - 입력페이지

test5.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="test5_ok.jsp" method="post">
이름: <input type="text" name="name/"><br/>
메모: <textarea rows="5" cols="30" name="memo"></textarea><br/>
성별: <input type="radio" name="gender" value="남자" checked="checked">남자
<input type="radio" name="gender" value="여자" checked="checked">여자<br/>
취미: <br/>
<input type="checkbox" name="hobby" value="여행">여행<br/>
<input type="checkbox" name="hobby" value="음악감상">음악감상<br/>
<input type="checkbox" name="hobby" value="영화감상">영화감상<br/>
<input type="checkbox" name="hobby" value="게임">게임<br/>
<input type="checkbox" name="hobby" value="책">책<br/>
<input type="checkbox" name="hobby" value="운동">운동<br/>
전공:<br/>
<select name="major" size="4" multiple="multiple">
<option value="수학과">수학과</option>
<option value="영어과">영어과</option>
<option value="물리학과">물리학과</option>
<option value="컴퓨터공학과">컴퓨터공학과</option>
</select>
<input type="submit" value="전송"/><br/>
<br/><br/><br/>
</form>
</body>
</html>

출력 화면

6. 사용자의 리스트 입력값 받아 결과페이지 호출하기 - 출력페이지

test5_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String memo = request.getParameter("memo");
String gender = request.getParameter("gender");
String hobby[] = request.getParameterValues("hobby");
String major[] = request.getParameterValues("major");

memo = memo.replaceAll("\n", "<br/>");//textarea의 줄바꿈을 인식하기 위함
String str = "";
if(hobby!=null){

for(String temp: hobby){
str+= (temp + " ");
}
}

String str1 = "";
if(major!=null){

for(String temp: major){
str1 += (temp + " ");
}
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>입력 조회</title>
</head>
<body>
이름: <%=name %><br/>
메모: <%=memo %><br/>
성별: <%=gender %><br/>
취미: <%=hobby %><br/>
취미: <%=str %><br/>
전공: <%=str1 %><br/>
</body>
</html>

출력 화면

7. 사용자의 리스트 입력값 받아 결과페이지 호출하기(1) - 입력페이지

listTest.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css">
body{
font-size: 10pt;
}
.itemBtn{
font-size: 9pt;
color: rgb(0,0,0);
background-color: rgb(240,240,240);
width: 30pt;
}
.btn{
font-size: 9pt;
color: rgb(0,0,0);
background-color: rgb(240,240,240);
}
.itemList{
font-size: 9pt;
width: 100pt;
}
</style>

<script type="text/javascript">
function itemAdd() {
var f = document.myForm;
var leftItem = f.leftItem;
leftItem[0] = new Option('배수지','배수지');/* 보이는 값(text), value값 순서(인덱스에 해당) */
leftItem[1] = new Option('전지현','전지현');/*dto.getName()으로 반복문 돌리면 DB에 있는 이름을 한번에! */
leftItem[2] = new Option('이하나','이하나');
leftItem[3] = new Option('천송이','천송이');
leftItem[4] = new Option('한가인','한가인');
leftItem[5] = new Option('이윤성','이윤성');
leftItem[6] = new Option('배슬기','배슬기');
}

function itemMove(val){
var f = document.myForm;
var source,target;
if(val=="left"){
source = f.rightItem;
target = f.leftItem;
}else{
source = f.leftItem;
target = f.rightItem;
}
var n,i;
n = target.length;

for(i=source.length-1;i>=0;i--){
if(source.options[i].selected){
target[n++] = new Option(source.options[i].text,source.options[i].value);
source[i] = null; /* 이동전 데이터 초기화 */
}
}
}

function sendIt() {
var f = document.myForm;

if(f.rightItem.val==""){ //f.rightItem.length==0
alert("쪽지 보낼 사람을 선택하세요.");
f.rightItem.focus();
return;
}
if(!f.msg.value){
alert("쪽지 내용을 입력하세요.");
f.msg.focus();
return;
}

for(var i=0;i<f.rightItem.length;i++){
f.rightItem[i].selected = true;
/* f.rightItem.options[i].selected = true; 상동. 선택하지 않더라도 rightItem에 있으면 메세지 전송하기 위함 */
}

f.action = "listTest_ok.jsp";
f.submit();/* 모든 조건문을 실행한 뒤 submit 실행. action으로 찾아가는 경로. */
}

</script>
</head>
<body onload="itemAdd()">
<form method="post" name="myForm">

<table border="0" style="font-size: 10pt;">
<tr align="left">
<td width="150">전체리스트</td>
<td width="70"> </td>
<td width="150">받는사람</td>
</tr>
<tr align="center">
<td width="150">
<select name="leftItem" multiple="multiple" size="7" class="itemList">

</select>
</td>
<td width="70">
<input type="button" value=">" onclick="itemMove('right');" class="itemBtn"/><br/>
<br/><br/><br/>
<input type="button" value="<" onclick="itemMove('left');" class="itemBtn"/><br/>
</td>
<td width="150">
<select name="rightItem" multiple="multiple" size="7" class="itemList">

</select>
</td>
</tr>
<tr>
<td colspan="3">
<br/>메세지<br/>
<textarea rows="5" cols="50" name="msg"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="3" align="right">
<input type="button" value="쪽지보내기" onclick="sendIt();" class="btn" />

</td>
</tr>
</table>
</form>
</body>
</html>

출력 화면

7. 사용자의 리스트 입력값 받아 결과페이지 호출하기(2) - 출력페이지

listTest_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String msg = request.getParameter("msg");
String rightItem[] = request.getParameterValues("rightItem");

msg = msg.replaceAll("\r\n", "<br/>");

String str = "";
if(rightItem != null){
for(String temp: rightItem){
str += temp + " ";
}
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
받는 사람: <%=str %><br/>
메세지:<br/> <%=msg %><br/>
</body>
</html>

출력 화면

Request에 들어있는 기본적인 정보

클라이언트 IP = <%=request.getRemoteAddr() %>
요청정보길이 = <%=request.getContentLength() %>
요청정보 인코딩 = <%=request.getCharacterEncoding() %>
요청정보 컨텐트 타입 = <%=request.getContentType() %>
요청정보 프로토콜 =<%=request.getProtocol() %>
요청정보 전송방식 =<%=request.getMethod() %> get/post방식
요청 URI = <%=request.getRequestURI() %>
컨텍스트 경로 =<%=request.getContextPath() %>
서버이름 =<%=request.getServerName() %>
서버포트 = <%=request.getServerPort() %>
한글 = request.setCharacterEncoding("UTF-8");

Input태그 Submit, Button 타입의 차이점

submit을 통한 전송이 좀 더 복잡해서 button을 많이 이용한다.

button1.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

function sendIt(val){
//var f = document.myForm;
var f = document.forms[0];/* body에 있는 form의 순서대로 인덱스번호가 붙음. 0번째 form */
if(!f.name.value){
alert("이름 작성하세요!");
f.name.focus();
return;
}
if(val=='a'){
f.action = "button2.jsp";
}else{
f.action = "button3.jsp";
}
f.submit();

}
function sendData() {
var f = document.forms[1];

if(!f.name.value){
alert("이름 작성하세요!");
f.name.focus();
return false;
}
f.submit();
}
</script>
</head>
<body>

button을 이용한 전송
<form method="post" name="myForm">
이름:<input type="text" name="name"/><br>
<input type="button" value="첫번째 전송" onclick="sendIt('a');"/>
<input type="button" value="두번째 전송" onclick="sendIt('b');"/>
</form>
<hr>
submit을 이용한 전송
<form action="" method="post" name="myForm1" onsubmit="return sendData();">
이름:<input type="text" name="name"/><br>
<input type="submit" value="첫번째 전송" onclick="this.form.action='button2.jsp';"/>
<input type="submit" value="두번째 전송" onclick="this.form.action='button3.jsp';"/>
</form>
</body>
</html>

출력 화면

submit을 이용한 전송의 경우 submit 을 클릭했을때 myform1의 onsubmit으로 이동

> sendData() 메소드 호출

> sendData() 내 f.submit() 호출

> "this.form.action='button2.jsp' 액션 실행

호출페이지

button2.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
첫번째 : <%=name %><br>
</body>
</html>

호출페이지

button3.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
두번째 : <%=name %><br>
</body>
</html>

8. 웹 버퍼의 용량

flush가 true일 경우 버퍼가 다찼을때, flush를 진행하고 계속해서 작업 진행

buffer.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page buffer="8kb" autoFlush="true"%>

<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%for(int i=1; i<=1000; i++){ %>
1234
<%
}
%>
</body>
</html>

저작자표시 비영리 변경금지

'Dev > JSP & Servlet' 카테고리의 다른 글

JSP - 캐릭터 인코딩, 디코딩 (0)	2019.02.19
JSP - 세션과 input태그를 통한 데이터 전송 비교 (0)	2019.02.19
JSP - scope과 attribute (0)	2019.02.18
JSP - Redirect, Forward, Session (0)	2019.02.15
JSP 실행구조, 페이지 요청 라이프 사이클 (0)	2019.02.14

현재글JSP 예제, get/post방식

창문을 열심히 닦아요