서버로 데이터 전송 - HTML 편

11 Nov 2020 in Web Dev on Java Spring

◇ JSP~서버 데이터 전송 포스팅 시리즈 ◇

1. JSP에서 서버로 데이터 전송 - intro
2. JSP에서 서버로 데이터 전송 - HTML - 현재 글
3. JSP에서 서버로 데이터 전송 - JS
4. 서버에서 JSP로 데이터 전송

---

1. 태그로 전송 :  a href 태그로 정보를 전달한다.
2. GET method로 전송 : form action 을 사용해 get 방식으로 정보를 전달한다.
3. POST method로 전송 : form action 을 사용해 post 방식으로 정보를 전달한다.

1번 방법 : 태그로 전송

• 태그로 전송을 누르면 서버로 정보를 전송해서 서버로 부터 받은 데이터에 정보를 출력하도록 할 수 있다

JSP

• a태그에 “method명?key1=value1&key2=value2” 이런 식으로 입력해서 서버에 값을 전달해 줄 수 있다.

  <a href=”send1?username=suarez&userage=34“>1. 태그로 전송</a>

  • 서버에 username 과 userage 정보가 넘어간다.

<!--jsp 파일-->
<a href="send1?username=suarez&userage=34">1. 태그로 전송</a><br>

JAVA

• @RequestMapping(value=”/send1”, method=RequestMethod.GET)

• 함수에 parameter가 있어서 jsp에서 보낸 정보를 받을 수 있다.

• 이 정보를 jsp에서 또 읽어오기 위해 Model 객체에 저장을 한다.

  model.addAttribute("name",username)
  

• return에 jsp 페이지 이름을 적어주고, 처리를 끝난 후 그 페이지를 보여준다.

• 이 함수는 controller 클래스 안에 들어가있다.

@RequestMapping(value="/send1", method=RequestMethod.GET)
public String send1(String username, int userage, Model model) {    			     		model.addAttribute("name", username);
    model.addAttribute("age", userage);
    return "index";
}

• jsp 파일에서 ${변수명}-el표기법 을 이용해 서버의 정보를 가져올 수 있다.

<span>서버로부터 받은 데이터 : ${name}, ${age}</span> <!--el 표기법-->

2번 방법: GET method로 전송

• jsp파일에서 form action =”mapping url” 로 java 함수와 매핑해준다.

• method 에는 GET을 준다.

• name에 있는 정보가 키로, value에 있는 정보가 값으로 서버에 넘어간다.

  <form action="send2" method="GET">
      <input name="변수명" value = "값">
  </form>
  

jsp

• method = “GET” 방법으로 서버에 정보를 요청한다.

• form 의 action 명으로 java파일의 어떤 메소드로 받아야하는지 정해줄 수 있다.
  • jsp파일에서 form action 에 “send2”를 넣고, java controller에서 requestmapping annotaion에 value=”/send2” 준다.

• form과 input을 사용하는 경우,넘길 정보의 변수 이름을 name에 넣어 value에 대한 key로 사용할 수 있다.

• 아래 코드에는 username 와 userage라는 변수가 서버로 넘어가게된다. 변수 값은 우리가 input에 입력하는 값이나 value로 태그 안에 직접 준 값이 된다.

  <label for="username"><input type="text" id="username" name="username" ></label><br>
  <label for="userage"><input type="text" id="userage" name="userage"></label>
  

• java에서 parameters을 만들어서 받을 수 있다.

  @RequestMapping(value="/send1", method=RequestMethod.GET)
  public string send1(String username, int userage){ //생략 }
  

• 아래 주소창에 jsp에서 넘긴 데이터가 다 보인다.

<form action="send2" method="GET">
    <label for="username"><input type="text" id="username" name="username" ></label><br>
    <label for="userage"><input type="text" id="userage" name="userage"></label><br>
    <input type="submit" value="전송">
</form>

java

@RequestMapping(“/send2”)에 GET 메소드는 굳이 적어주지 않아도 된다.

@RequestMapping("/send2")
public String send2(String username, int userage, Model model) {
    model.addAttribute("name", username);
    model.addAttribute("age", userage);
    return "index";
}

3번 방법: POST 방식으로 전송하기

• jsp파일에서 form action =”mapping url” 로 java 함수와 매핑해준다.

• method 에는 POST를 준다.

• name에 있는 정보가 키로, value에 있는 정보가 값으로 서버에 넘어간다.

  <form action="send2" method="POST">
      <input name="변수명" value = "값">
  </form>
  

jsp

• method = “POST” 방법으로 서버에 정보를 요청한다.

  ​

• POST 방식을 사용하면 jsp에서 서버에 넘긴 정보가 보이지 않는다.

  

<form action="send3" method="POST">
    <label for="username"><input type="text" id="username" name="username" ></label><br>
    <label for="userage"><input type="text" id="userage" name="userage"></label><br>
    <input type="submit" value="전송">
</form>

JAVA

• POST는 @RequestMapping(value=”/send3”, method=RequestMethod.POST) 이렇게 써줘야한다.

@RequestMapping(value="/send3", method=RequestMethod.POST)
public String send3(String username, int userage, Model model) {
    model.addAttribute("name", username);
    model.addAttribute("age", userage);
    return "index";
}