【Java】요청을 던져 화면을 표시②(GET/POST)

요청을 던져 결과를 화면 표시 (thymeleaf)



(골) html 양식에 POST된 값(성명)을 포함하여 화면에 표시
Project Root
└─src
    └─ main
        └─ java  
            └─ com.example
                └─ demo
                    └─trySpring
                       └─HelloController.java
Project Root
└─src
    └─ main
        └─ resources
            └─templates
                 └─hello.html
                
                 └─helloResponse.html

GET에서 hello.html로 화면 전환


  • 입력 양식 작성

  • hello.html
    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org" lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <form method="post" action="/hello">
            苗字:
            <input type="text" name="text1" th:value="${text1_value}"/>
            <br>
            名前:
            <input type="text" name="text2" th:value="${text2_value}"/>
            <br><br>
            <input type="submit" value="クリック"/>
            <br>
        </form>
    </body>
    </html>
    



    POST할 컨트롤러 클래스(HelloController) 만들기


  • POST처의 placeholder에는 model.addAttribute
  • GET/POST는 동일한 엔드 포인트 (URL)에서 OK
  • devtool 네트워크에서 확인하면 GET/POST 요청이 발생했음을 확인할 수 있습니다

  • HelloController.java
    import lombok.Getter;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    
    @Controller
    public class HelloController {
        @GetMapping("/hello")
        private String getHello() {
            return "hello";
        }
        @PostMapping("/hello")
        public String postRequest(@RequestParam("text1")String text1,@RequestParam("text2")String text2, Model model){
            //HTMLの画面から受け取った文字列をModelに登録
            model.addAttribute("userName","私は"+ text1 +" "+ text2+"です。"); 
            return "helloResponse"; //helloResponse.htmlに画面遷移
        }
    }
    

    POST 대상 helloResponse.html 만들기


  • 템플릿과 모델의 값 (입력 된 성명)을 병합 한 결과를 반환합니다.

    helloResponse.html
    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF8"></meta>
        <title>Response Sample</title>
    </head>
    <body>
    <h1>Hello Response</h1>
    <!--
     Modelからの値を受け取り受け取った文字を表示
     プレースホルダに指定したvalue(userName)をいれる
    -->
    <p th:text="${userName}"></p><body>
    </html>
    

    URL에 액세스하여 확인!



    URL : http://localhost:8080/hello


  • 좋은 웹페이지 즐겨찾기