본문 바로가기
✨ Back-end/etc

[Spring] Ajax 다양한 방법, @ResponseBody와 @RequestBody

by 환풍 2023. 9. 13.
728x90
반응형

컨트롤러

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
package com.bit.controller;
 
import java.util.ArrayList;
import java.util.HashMap;
 
import javax.annotation.Resource;
import javax.inject.Inject;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
 
import com.bit.model.service.AjaxDemoService;
 
import lombok.NonNull;
import lombok.RequiredArgsConstructor;
 
//@RestController
//@RequestMapping("/ajaxDemo/")
 
@Controller
@RequiredArgsConstructor
public class AjaxDemoController {
    
    private final AjaxDemoService ajaxDemoService;    
    @GetMapping("/ajax")
    public String ajaxProcess() {
        System.out.println(ajaxDemoService);
        return "basicAjax1/ajaxDemo1";
    }
    @PostMapping("ajaxText1")
    @ResponseBody
    public String ajaxText1Process() {
        return "basicAjax1/ajaxData1";
    }
    
    @PostMapping("ajaxText2")
    @ResponseBody
    public HashMap<String, Object> ajaxText2Process(@RequestBody HashMap<String, Object>map) {
        System.out.println(map);
        return map;
    }
    //emp,student,pie ajax,intercepter,cookie,session
    @RequestMapping(value ="ajaxText3",method = RequestMethod.POST)
    @ResponseBody
    public ArrayList<HashMap<String, Object>> ajaxText3Process() {
        ArrayList<HashMap<String, Object>>list=new ArrayList<HashMap<String,Object>>();
        HashMap<String, Object>map=new HashMap<String, Object>();
        HashMap<String, Object>map2=new HashMap<String, Object>();
        map.put("empno", 7788);
        map.put("ename", "smith");
        map.put("sal", 8000);
        
        map2.put("empno", 7789);
        map2.put("ename", "allen");
        map2.put("sal", 7000);
        list.add(map);
        list.add(map2);
        
        return list;
    }
}
 
 
cs

jsp, js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
 $(function(){
     $("button#ajax1").click(function(){
         $.ajax({
             url:'${pageContext.request.contextPath}/ajaxText1',
             type:'POST',
             dataType:'text',                              
             success:function(p){
                 console.log(p);
             },
             error:function(e){
               alert('error');  
             }//eror
           });//ajax
     });//click
     $("button").eq(1).click(function(){        
                var jsonValue={"id":"blue","name":"abc","weight":55.7,"height":189.9};
                console.log(jsonValue);
                  $.ajax({
                      url:'${pageContext.request.contextPath}/ajaxText2',
                      type:'POST',
                      data:JSON.stringify(jsonValue),
                      contentType:"application/json",
                      dataType:'json',                              
                      success:function(p){
                          $(p).each(function(index,dom){
                              //console.log(index+' '+dom);
                              $(Object.keys(dom)).each(function(j,key){
                                  console.log(key+' :'+dom[key]);
                              });
                          });
                      },
                      error:function(e){
                        alert('error');  
                      }//eror
                      
                    });//ajax
          });//Click
          $("button#ajax3").click(function(){
              $.ajax({
                  url:'${pageContext.request.contextPath}/ajaxText3',
                  type:'POST',                  
                  contentType:"application/json",
                  dataType:'json',                              
                  success:function(result){
                      console.log(result);
                      $(result).each(function(index,x){
                         $(Object.keys(x)).each(function(index,xx){//내부
                             console.log(xx+" "+x[xx]);
                         }); 
                      });
                  },
                  error:function(e){
                    alert('error');  
                  }//eror
                  
                });//ajax
      });//Click
               
 });
</script>
</head>
<body>
  <button id="ajax1">AjaxMVCDEMO1</button>
  <button id="ajax2">AjaxMVCDEMO2</button>
  <button id="ajax3">AjaxMVCDEMO3</button>
  <button id="ajax4">AjaxMVCDEMO4</button>
</body>
</html>
cs

다음과 같은 코드가 있다.

EX1)

버튼을 클릭하게되면, console창에 'basicAjax1/ajaxData1' 이라는 문자열을 출력해보고자 한다.

 

js에서 jQuery를 이용해 컨트롤러로 한번 거친다음, 컨트롤러에서 단순 문자 'basicAjax1/ajaxData1' 를 갖고 돌아온다.

이 예제가 Ajax 데이터를 뿌리는 가장 기초적인 방법이다.

Ex2)

두번째 버튼을 클릭하게 되면, Map 형태로 Console에 데이터들이 나타난다.

JS

데이터를 JSON 형태로 만들어 컨트롤러에 넘겨주는데, 이때 data를 JSON.stringify(jsonValue)를 지정해야한다.

 

data: JSON.stringify(jsonValue):

이 부분은 AJAX 요청의 본문 데이터를 설정한다. jsonValue 객체를 JSON 문자열로 직렬화하여 서버로 전송한다.

이렇게 하면 서버에서는 해당 JSON 문자열을 파싱하여 사용할 수 있다. 이 부분은 서버로 전송할 데이터를 정의하는 중요한 부분이다. 필요에 따라 서버에서 요구하는 형식에 맞게 데이터를 설정해야 한다.

 

contentType: "application/json":

이 옵션은 요청 본문의 데이터 유형을 설정한다. 여기서 "application/json"으로 설정되었으므로, 요청 본문은 JSON 형식으로 전송된다는 것을 나타낸다. 서버는 이 정보를 사용하여 요청을 파싱할 때 JSON 형식으로 파싱해야 함을 알 수 있다.
만약 데이터를 다른 형식으로 전송하려면 이 부분을 해당 형식에 맞게 수정해야한다.

 

dataType: 'json':

이 옵션은 서버에서 받은 응답 데이터의 유형을 설정한다. 여기서 "json"으로 설정되었으므로, 서버에서 반환된 응답 데이터가 JSON 형식임을 나타낸다. 따라서 AJAX 호출의 success 함수에서 응답 데이터를 JSON으로 파싱해 사용할 수 있다.
만약 서버에서 다른 형식의 응답 데이터를 반환한다면, 이 부분을 해당 형식에 맞게 수정해야한다.

컨트롤러

컨트롤러에서 Map형태를 return 해주었다.

@ResponseBody 어노테이션은 컨트롤러 메소드가 반환하는 데이터가 HTTP 응답 본문에 직접 포함되어야 함을 나타낸다.
주로 RESTful 웹 서비스에서 JSON 또는 XML 형식의 데이터를 반환할 때 사용된다. 스프링은 메소드에서 반환한 객체를 적절한 포맷(예: JSON)으로 변환하여 HTTP 응답 본문에 넣는다. 이 예제에서 @ResponseBody 어노테이션은 컨트롤러 메소드가 HashMap<String, Object>을 반환하면 이 데이터를 HTTP 응답으로 전송하도록 지시한다.

@RequestBody 어노테이션은 HTTP 요청 본문에 포함된 데이터를 메소드 파라미터로 매핑하라는 것을 나타낸다.
주로 POST 또는 PUT 요청에서 클라이언트가 서버로 데이터를 전송할 때 사용된다.
스프링은 요청 본문의 데이터를 자바 객체로 변환하여 컨트롤러 메소드의 파라미터에 주입한다.
이 예제에서 @RequestBody 어노테이션은 HTTP POST 요청의 본문에서 데이터를 추출하여 HashMap<String, Object> 형태의 객체로 변환하고, 이 객체를 컨트롤러 메소드의 map 파라미터에 전달한다.

종합하면, @ResponseBody는 컨트롤러 메소드가 데이터를 HTTP 응답으로 반환할 때 사용되고,

@RequestBody는 HTTP 요청의 본문에서 데이터를 추출하여 컨트롤러 메소드로 전달할 때 사용된다. 이렇게 함으로써 클라이언트와 서버 간의 데이터 교환을 간편하게 처리할 수 있다.

 

즉, Ajax에서 현재 JSON 데이터로 컨트롤러에 보냈기 때문에,

data:JSON.stringify(jsonValue) <<- 이게 ajax에 포함되어 있으면

이를 받기 위해서는 @RequestBody가 필요한 것이다.

Ex3)

 

JS

 

 

자바 코드로 데이터들을 임의로 map에 담아 List에 넣어 Ajax로 보내는 방식이다.

728x90
반응형
저작자표시 비영리 변경금지

'✨ Back-end > etc' 카테고리의 다른 글

[Spring] 구글 차트 DB에 넣어 Ajax로 시각화하기  (2) 2023.09.14
[Spring] thymleaf에서 제공하는 th:object 와 th:field  (0) 2023.09.13
[Spring] 타임리프 경로(URL) 설정  (0) 2023.09.02
[Spring] LocalDateTime.now( ) 써서 시간 구하기  (0) 2023.09.02
@ModelAttribute사용하여 극한으로 코드 줄이기  (0) 2023.09.02

관련글

댓글

티스토리툴바