티스토리 뷰

JSP

[JSP] Request, Response 간단한 회원가입창 예제

먹태 2018. 7. 10. 16:04




<회원가입 입력폼, ex05_req.jsp>


  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>회원가입</title>
  8. <style>
  9.     h3{color : red;}
  10. </style>
  11. <script>
  12.     function send_go(){
  13.         if(document.f.name.value == ""){
  14.             alert("이름을 입력하세요");
  15.             document.f.name.focus();
  16.             return;
  17.         }
  18.        
  19.         if(document.f.id.value == ""){
  20.             alert("아이디를 입력하세요");
  21.             document.f.id.focus();
  22.             return;
  23.         }
  24.        
  25.         if(document.f.pw.value == ""){
  26.             alert("패스워드를 입력하세요");
  27.             document.f.pw.focus();
  28.             return;
  29.         } else if (document.f.pw.value != document.f.pwc.value){
  30.             alert("암호가 일치하지 않습니다. 다시 입력하세요");
  31.             document.f.pw.value = "";
  32.             document.f.pwc.value = "";
  33.             document.f.pwd.focus();
  34.             return;
  35.         }
  36.    
  37.        
  38.         //요청 URL
  39.         document.f.action = "ex05_resp.jsp";
  40.        
  41.         //서버쪽에 보내기
  42.         document.f.submit();
  43.     }
  44.  
  45.  
  46. </script>
  47. </head>
  48. <body>
  49.     <h1>회원가입</h1>
  50.     <form name="f">
  51.         <fieldset>
  52.             <h3>*는 필수입력 사항입니다.</h3>
  53.             *이름 : <input type="text" name= "name"><br><br>
  54.             *아이디 : <input type="text" name= "id"><br><br>
  55.             *패스워드 : <input type="text" name= "pw"><br><br>
  56.             *패스워드 확인 : <input type="text" name= "pwc"><br><br>
  57.             이메일 : <input type="email" name="email"><br><br>
  58.             취미 : <input type="checkbox" name="hobby" value="운동"> 운동
  59.             <input type="checkbox" name="hobby" value="게임"> 게임
  60.             <input type="checkbox" name="hobby" value="영화"> 영화
  61.             <input type="checkbox" name="hobby" value="독서"> 독서<br><br>
  62.             <input type="submit" value="회원가입" onclick="send_go()">
  63.             <input type="reset" value="취소">
  64.         </fieldset>
  65.     </form>
  66. </body>
  67. </html>









<폼에서 넘어온 값을 표시하는 ex05_resp.jsp>


  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3.  
  4. <%
  5.     //요청정보로부터 넘어온 데이터 추출(파라미터값)
  6.     String name = request.getParameter("name");
  7.     String id = request.getParameter("id");
  8.     String pw = request.getParameter("pw");
  9.     String email = request.getParameter("email");
  10.     String[] hobby = request.getParameterValues("hobby"); //체크박스 동일이름으로 여러값 받음
  11.  
  12. %>
  13.  
  14. <!DOCTYPE html>
  15. <html>
  16. <head>
  17. <meta charset="UTF-8">
  18. <title>회원가입 정보</title>
  19. </head>
  20. <body>
  21.     <h1>회원가입 정보</h1>
  22.     <ul>
  23.         <li>이름 : <%=name %></li>
  24.         <li>ID : <%=id %></li>
  25.         <li>PW : <%=pw %></li>
  26.         <li>이메일 : <%=email %></li>
  27.         <li>취미 : <%=hobby %></li>
  28.         <li>취미 :
  29.         <% for (String hobbies : hobby ) {
  30.             out.print(hobbies + " ");
  31.             }
  32.         %>
  33.         </li>
  34.     </ul>
  35.  
  36. </body>
  37. </html>


- 취미는 배열(체크박스는 복수선택이 가능)이기 때문에 27번째 줄대로 출력하면 주소값이 나온다. 그래서 28번째 줄처럼 입력해야 함













- 함수 제대로 작동하는지 확인









- 입력후 '회원가입' 버튼 클릭






<기입한 내용표시>



'JSP' 카테고리의 다른 글

[JSP] Request, Response 성적처리 예제  (0) 2018.07.10
[JSP] 액션태그  (0) 2018.07.10
[JSP] Request, Response 객체  (0) 2018.07.10
[JSP] Servlet - form값 받기  (0) 2018.06.21
[JSP] Servlet - init, destory, @PostConstruct, @PreDestroy  (0) 2018.06.20
댓글
최근에 올라온 글
최근에 달린 댓글
링크
Total
Today
Yesterday