JSP를 이용해서 form의 값 받아오기

JSP

JSP를 이용해서 form의 값 받아오기

carrot62 2020. 8. 9. 15:34

예제) 다음처럼 input element를 동적으로 추가하도록 만들어진 form에서 사용자가 입력한 값을 jsp를 이용해서 출력해보자

이 문제를 해결하기 위해서는 총 3가지의 파일과 1개의 javabean 클래쓰가 필요할 것이다:

form.jsp: Form화면이 나오고 사용자로부터 입력 값을 요구하는 페이지
process.jsp: 자바빈의 형식으로 데이터를 받아서 출력페이지(output.jsp)로 보내주는 페이지
output.jsp: 자바빈의 변수들을 받아와서 화면에 사용자가 입력했던 값을 출력해주는 페이지
User.java: 사용자가 입력한 값에 대해 getters와 setters으로 데이터를 받아오는 클래쓰 (사용자가 동적으로 element들을 추가하기 때문에 변수는 string[] type으로 선언해야 할 것이다.)

위의 form 코드는 다음과 같다[더보기 클릭]:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
<style>
    input.inline {display:inline;width:70%;margin-right:10px}
</style>
  
<script>
var i = 0;
$(document).ready(function(){
  $("#newdata").hide();
  $("#add").click(function(){
    i++;
    var html= $("#newdata").html().replace("new", "new" + i);
    $("#elements").append(html);
  });
  
  $(document).on('click', '.remove', function(){
        $(this).parent().remove();
  });
});

</script>
</head>
<body oncontextmenu='return false' onselectstart='return false' ondragstart='return false'>

<div class="container">
  <h3>Dynamically Add or Remove input field with JQuery</h3>

  <form  id='form1' action="process.jsp">
  <div id= 'elements'>
    <div class="form-group" id='form-group1'>
      <input type="text" class="form-control inline" placeholder='Enter your hobby'><button type="button" class="btn btn-primary" id='add'>ADD</button>
    </div>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

<div id='newdata'>
  <div class="form-group" id='new'>
   	<input type="text" class="form-control inline" id='data' placeholder='Enter your hobby'><button type='button' class="btn btn-danger remove" >X</button>
  </div> 
</div>
</body>
</html>

jsp 파일로 사용자 입력 값을 보내주기 위해서는 우선 name을 input 항목에 추가해줘야 할 것이다.

process.jsp:

<jsp:useBean id="hobby" class="com.info.User"></jsp:useBean>
	<jsp:setProperty property="*" name="hobby"/>
	<jsp:forward page="output.jsp"/>

자바빈 클래쓰 파일에서는 name 이름으로 값을 배열 형식으로 받아오도록 한다(사용자가 동적으로 값을 추가해가면서 입력하기 때문에 몇개의 value를 입력하게 될지 모르기 때문에 배열을 사용한다)

User.java:

package com.info;

public class User {
	private String[] hobby;

	public String[] getHobby() {
		return hobby;
	}

	public void setHobby(String[] hobby) {
		this.hobby = hobby;
	}
	

}

배열 값을 출력하고 싶을 때는 다음과 같은 코드를 사용하면 된다

output.jsp:

<p><%=String.join("\n, ",request.getParameterValues("hobby"))%></p>

출력 예시: