본문 바로가기
HTML

41일차//Servlet 실습 4 (form만들어 서버에 보내 html출력) 이름, 연령, 취미 조사

by aesup 2021. 3. 11.
728x90

HTML

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>

 

  • method의 값으로는 요청을 처리하는 방식 ( ex> get, post )
    • Get : http://IP주소:port번호/컨텍스트/path/MemberJoin?id="admin"&name="홍길동" -> doGet() 호출 [ 경로노출, 보안 위험 ]
    • Post : http://IP주소:port번호/컨텍스트/path/MemberJoin -> doPost() 호출 [header에 정보가 담겨서 서버에 전송]

 

<form action="data1" id = "frm"  method="post">
<table>
	<tr>
	<td>이름</td>
	<td><input type = "text" name = "name" id = "_name"> </td>
	
	</tr>

1.form 태그 action으로 보낼 서버 명칭을 지정한다.

2.form  태그안에  method를 기입해 요청처리 방식을 정한다.

<tr>
	<td>연령대</td>
	<td>
	
		<select name = "age">
			<option value = "10~20">10대~20대</option>
			<option value = "20~30">20대~30대</option>
			<option value = "30~40">30대~40대</option>
			<option value = "40~50">40대~50대</option>
			
		</select>
	
	
	</td>
	
	</tr>
	
	<tr>
	<td>성별</td>
	<td>
	  <input type="radio" name = "uniS" value = "남자"> 남자
	  <input type="radio" name = "uniS" value = "여자"> 여자
	
	</td>
	
	</tr>
	
	<tr>
	<td>취미</td>
	<td>
	 <input type="checkbox" name = "favor" value = "풋살"> 풋살<br>
	  <input type="checkbox" name = "favor" value = "롤"> 롤<br>
	  <input type="checkbox" name = "favor" value = "카페투어"> 카페투어
	 </td>
	
	</tr>

</table>

<button type="button" id = "btn">확인</button>

</form>

<script type="text/javascript">
$(document).ready(function() {
	$("#btn").click(function () {
		//검사
		if($("#_name").val() == ""){
			alert('이름을 입력해 주십시오');
			return;
		};
		
		
		//alert('');
		$("#frm").attr("action","data1").submit();
		//$("#frm").submit();
	});
});

</script>

</body>
</html>
package way;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(urlPatterns = "/data1")	//namespace xml사용안하고 손쉬운 방법이있다.
public class WayServlet1 extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//한글깨지려면 세팅꼭
				//포스트에서 할려면
				req.setCharacterEncoding("utf-8");
						
				
				
				String name = req.getParameter("name");
				String age = req.getParameter("age");
				String uniS = req.getParameter("uniS");
				String favor[] = req.getParameterValues("favor");
				
				resp.setContentType("text/html; charset=utf-8");
				
				PrintWriter pw = resp.getWriter();
				
				pw.println("<html>");
				pw.println("<head>");
					pw.println("<title>제목</title>");
				pw.println("</head>");
				
				pw.println("<body>");
				
				pw.println("<p>이름:" + name + "</p>");
				pw.println("<p>연령대:" + age + "</p>");
				
				
				
				
				pw.println("<p>성별:" + uniS + "</p>");
				
				String favor1="";
				
				if(favor != null) {
					for (int i = 0; i < favor.length; i++) {
						favor1 += favor[i] + "  ";
						
						
					}
					}
				
				pw.println("<p>취미:" + favor1 + "</p>");
				//데이터 전송 구간.
				//favor는 배열로 작성.
				pw.println("<a href='data2?name=" +name +"&age=" + age +
						"&uniS=" + uniS + "&favor=" + favor1+"'>데이터전송</a>");
				/*
				//favor값 받기위해 for문 작성.
				if(favor != null) {
				for (int i = 0; i < favor.length; i++) {
					
					pw.println(favor[i]);
				}
				}
				// a태그 닫아주기
				pw.println("'>데이터전송</a>");
				*/
				//sample에 name, sage변수를 가져간다.
				pw.println("</body>");
				
				
				
				pw.println("</html>");
				pw.close();
				
	}
	
}
package way2;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dto.searchDto;


@WebServlet(urlPatterns = "/data2")
public class WayServlet2 extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
				//System.out.println("SampleServlet doGet");
				//java
				//다시받음
				String name = req.getParameter("name");
				String age = req.getParameter("age");
				String uniS = req.getParameter("uniS");
				String favor = req.getParameter("favor");
				
				System.out.println(name);
				System.out.println(age);
				System.out.println(uniS);
				
				
		/*
		 * System.out.println(name); System.out.println(age); System.out.println(uniS);
		 * System.out.println(favor);
		 */
				
				//java
				//resp.sendRedirect("world?name" + name + "&age=" +age);
				searchDto dto = new searchDto(name, age, uniS, favor);
				//생성한 Dto 의 파라미터에 받아온 데이터를 넣는다.
				
				req.setAttribute("result", dto); //dto를 mem객체로 저장해서 짐을싼다.
				
				
				//forward 전진
				req.getRequestDispatcher("data3").forward(req,resp);//짐을 가지고이동
				
				//getRequestDispatcher : 클라이언트가 전송한 데이터를 그대로 옮긴다.
				//sendRedirect: 새로운 페이지로 이동(기존 데이터 전송 불가)
				
				//word로 가라 대신 짐을 가지고 이동해라
				//resp.sendRedirect("world"); 그냥 경로이동
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
	}

}
package way3;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


import dto.searchDto;
@WebServlet(urlPatterns = "/data3")
public class WayServlet3 extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		
		
		
		resp.setContentType("text/html; charset=utf-8");
		
		PrintWriter pw = resp.getWriter();
		
		pw.println("<html>");
		pw.println("<head>");
			pw.println("<title>제목</title>");
		pw.println("</head>");
		
		pw.println("<body>");
		pw.println("<h3>data3 Servlet</h3>");
		
		searchDto result = (searchDto)req.getAttribute("result");
		//저장한 mem 객체를 짐싼걸 풀어온다.
		
		pw.println("<p>이름:" + result.getName() + "</p>");
		pw.println("<p>연령대:" + result.getAge() + "</p>");
		pw.println("<p>성별:" + result.getUniS() + "</p>");
		pw.println("<p>취미:" + result.getFavor() + "</p>");
		
		
		
		
		/*
		 * pw.println("<h3>World Servlet</h3>");
		 * 
		 * 
		 * String name = req.getParameter("name"); String age = req.getParameter("age");
		 * 
		 * 
		 * pw.println("<p>name:" + name + "</p>");
		 * pw.println("age : <input type = 'text	' value = " + age +"><br>");
		 */
		pw.println("</body>");
		
		
		
		pw.println("</html>");
		pw.close();
		
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
	}
	
}
package dto;

import java.io.Serializable;
import java.util.Arrays;

public class searchDto implements Serializable {
	//Serializable직렬화다
	private String name;
	private String age;
	private String uniS;
	private String favor;
	
	public searchDto() {
		
	}

	public searchDto(String name, String age, String uniS, String favor) {
		super();
		this.name = name;
		this.age = age;
		this.uniS = uniS;
		this.favor = favor;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getAge() {
		return age;
	}

	public void setAge(String age) {
		this.age = age;
	}

	public String getUniS() {
		return uniS;
	}

	public void setUniS(String uniS) {
		this.uniS = uniS;
	}

	public String getFavor() {
		return favor;
	}

	public void setFavor(String favor) {
		this.favor = favor;
	}

	@Override
	public String toString() {
		return "searchDto [name=" + name + ", age=" + age + ", uniS=" + uniS + ", favor=" + favor
				+ "]";
	}
	
	
}
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1">
  <display-name>work</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  
  <!-- <servlet>
  <servlet-name>data1</servlet-name>
  <servlet-class>way.WayServlet1</servlet-class>
  </servlet>
  
  <servlet-mapping>
  <servlet-name>data1</servlet-name>
  <url-pattern>/data1</url-pattern>
  </servlet-mapping>
  
  
    <servlet>
  <servlet-name>data2</servlet-name>
  <servlet-class>way2.WayServlet2</servlet-class>
  </servlet>
  
  <servlet-mapping>
  <servlet-name>data2</servlet-name>
  <url-pattern>/data2</url-pattern>
  </servlet-mapping>
  
  
   <servlet>
  <servlet-name>data3</servlet-name>
  <servlet-class>way3.WayServlet3</servlet-class>
  </servlet>
  
  <servlet-mapping>
  <servlet-name>data3</servlet-name>
  <url-pattern>/data3</url-pattern>
  </servlet-mapping> -->
  
  
</web-app>
728x90