📅 2024년 01월 12일

42일차 : Spring (2)

Spring Http Post 통신

// 화면 보여주기
    @GetMapping("/form-screen")
    public String form_screen(){
        return "hello-form-screen";
    }
    // form 데이터 처리
    @PostMapping("/form-screen-handle")
    @ResponseBody
    public Hello form_screen_handle(
            @RequestParam String name,
            @RequestParam String email,
            @RequestParam String password
    ){
        Hello hello = new Hello();
        hello.setName(name);
        hello.setEmail(email);
        hello.setPassword(password);
        return hello;
    }
    @PostMapping("/form-screen-handle1")
    @ResponseBody
    public Hello form_screen_handle1(Hello hello){
        System.out.println(hello);
        return hello;
    }
    // json 데이터 처리
    @GetMapping("/json-screen")
    public String json_screen(){
        return "hello-json-screen";
    }
    // post로 요청이 들어왔을때 body에서 data를 꺼내기 위해 사용
    @PostMapping("/json-screen-handle1")
    @ResponseBody
    public Map<String,String> json_screen_handle1(
            @RequestBody Map<String, String> body
    ){
        Map<String, String> reqMap = new HashMap<>();
        reqMap.put("req_name", body.get("name"));
        reqMap.put("req_email", body.get("email"));
        reqMap.put("req_password", body.get("password"));
        reqMap.put("url", "/hello/json-screen");
        System.out.println("json_screen_handle1");
        System.out.println(reqMap);
        System.out.println();
        return reqMap;
    }
    @PostMapping("/json-screen-handle2")
    @ResponseBody
    public String json_screen_handle2(@RequestBody JsonNode body){
        Hello hello = new Hello();
        hello.setName(body.get("name").asText());
        hello.setEmail(body.get("email").asText());
        hello.setPassword(body.get("password").asText()); System.out.println("json_screen_handle2");
        System.out.println("이름 : "+ hello.getName());
        System.out.println("이메일 : "+ hello.getEmail());
        System.out.println("비밀번호 : "+ hello.getPassword());
        System.out.println();
        return "ok";
    }
    @PostMapping("/json-screen-handle3")
    @ResponseBody
    public String json_screen_handle3(@RequestBody Hello hello){
        System.out.println("json_screen_handle3");
        System.out.println(hello);
        System.out.println();
        return  "ok";
    }

axios post request

	async function sendData1() {
        const jsonData =    {
            name:document.getElementById("name").value,
            email:document.getElementById("email").value,
            password:document.getElementById("password").value
        }
        try{
            const axiosdata1 = await axios({
                method : "post",
                url : "http://localhost:8080/hello/json-screen-handle1",
                data : JSON.stringify(jsonData),
                headers: {"Content-Type":"application/json"}
            });
            console.log('axiosdata1 : ');
            let data = axiosdata1.data;
            document.getElementById("reName").innerText = data.req_name;
            document.getElementById("reEmail").innerText = data.req_email;
            document.getElementById("rePassword").innerText = data.req_password;
            location.href = data.url;
        }catch (e) {
            console.log(e);
        }
    }
    async function sendData2() {
        const jsonData = {
            name: document.getElementById("name").value,
            email: document.getElementById("email").value,
            password: document.getElementById("password").value
        }
        try {
            const axiosdata2 = await axios({
                method: "post",
                url: "http://localhost:8080/hello/json-screen-handle2",
                data: JSON.stringify(jsonData),
                headers: {"Content-Type": "application/json"}
            });
            location.href = "/hello/json-screen";
        } catch (e) {
            console.log(e);
        }
    }
    async function sendData3() {
        const jsonData = {
            name: document.getElementById("name").value,
            email: document.getElementById("email").value,
            password: document.getElementById("password").value
        }
        try {
            const axiosdata3 = await axios({
                method: "post",
                url: "http://localhost:8080/hello/json-screen-handle3",
                data: JSON.stringify(jsonData),
                headers: {"Content-Type": "application/json"}
            });
            location.href = "/hello/json-screen";
        } catch (e) {
            console.log(e);
        }
    }

Spring 실습 github 링크