영상후기 - ajax 다뤄보기

박철현·2023년 6월 6일

목록 보기

132/160

프로젝트 댓글 Ajax 도입하기 위한 기초 영상 정주행 시작! 내가 오늘 Ajax로 구현 하고만다!
화면 <-> 컨트롤러 다룰 예정, 의존성 : Lombok, Spring Web, Thymeleaf
보통 활용 범위 : 이메일 또는 아이디 중복체크, 좋아요 또는 싫어요, 찜, 댓글 작성
자바스크립트로 Ajax 활용 가능하나 복잡함 -> 보통 JQUERY 활용한 Ajax 구현
- 영상에서 CDN 주소 활용
- https://releases.jquery.com/
- minified 버전 활용
Ajax 사용법

  $ajax({
  	type : 요청방식,
  	url : 요청주소,
  	data : 보낼 파라미터값,
  	success : 요청 성공했을 시,
  	error : 실패했을 시
    });

Ajax 함수 사용법(데이터를 실어서 보내는 방식)

 const ex03Fn = () => {
 const val1 = "Hello SpringBoot!!";
      $.ajax({
        // 요청방식 : get
          // 요청주소 : /ex03
          type: "get",
          url: "/ex03",
          // parameter 전달하기
          // 키:value 값 => 컨트롤러에서 @RequestParam("param1") String param1 이런식으로 받을 수 있음 => 4강
          data: {
              "param1": val1,
              "param2": "안녕"
          },
          // 요청이 끝나고 어떻게 처리할지 정의가 필요함
          // 여러 방식이 있음(done 등 체이닝 함수도 있음)
          // 요청이 성공했을 때 실행되는 부분
          // res 응답으로 html 파일이 넘어올 시 html 코드가 넘어옴(화면이 변경되지 않음)
          success: function(res) {
              console.log("성공", res);
          },
          // 요청이 실패했을 때 실행되는 부분
          error: function () {
              console.log("실패");
          }
      })
   }

Ajax는 공식같이 어떤 값 사용할 지 구분만 해도 사용 원활
View Resolver에 의해 화면이 바뀌어 보이기 보다는 결과가 응답으로 넘어온다.
success: function(res) <- 응답으로 html 파일 넘어온다고 하면, res에 html 소스코드로 넘어옴(화면 x)
Ajax - 객체 형태로 넣어서 보내도 인식

 <script>
    const ex04Fn = () => {
        const val1 = "Hello SpringBoot!!";

		// 위 코드와 동일하게, @RequestParam("param1") param1, 
        // @RequestParam("param2") param2 동작함!
        const params = {
            "param1": val1,
            "param2": "안녕"
        };
      $.ajax({
        // 요청방식 : post
          // 요청주소 : /ex04
          type: "post",
          url: "/ex04",
          // parameter 전달하기
          data: params,
          // 요청이 끝나고 어떻게 처리할지 정의가 필요함
          // 여러 방식이 있음(done 등 체이닝 함수도 있음)
          // 요청이 성공했을 때 실행되는 부분
          // res 응답으로 html 파일이 넘어올 시 html 코드가 넘어옴(화면이 변경되지 않음)
          success: function(res) {
              console.log("성공", res);
          },
          // 요청이 실패했을 때 실행되는 부분
          error: function () {
              console.log("실패");
          }
      })
    }
  </script>

파라미터 따로 받는것이 아닌 DTO 객체로 받기
- @ResponseBody 있는 경우 : 객체를 직접 HTTP 응답 본문에 사용
- @ResponsBody 없는 경우 : 뷰 리졸버를 사용하여 데이터 렌더링
- DTO객체 정의

@Getter
@Setter
@ToString
@AllArgsConstructor 
public class AjaxDTO {
	private String param1;
	private String param2;
}

Ajax 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
          crossorigin="anonymous"></script>
</head>
<body>
  <button onclick="ex05Fn()">ex05 함수 호출</button>
</body>
  <script>
    const ex05Fn = () => {
        const val1 = "Hello SpringBoot!!";

        const params = {
            "param1": val1,
            "param2": "안녕"
        };
      $.ajax({
        // 요청방식 : get
          // 요청주소 : /ex05
          type: "get",
          url: "/ex05",
          // parameter 전달하기
          data: params,
          // 요청이 끝나고 어떻게 처리할지 정의가 필요함
          // 여러 방식이 있음(done 등 체이닝 함수도 있음)
          // 요청이 성공했을 때 실행되는 부분
          // res 응답으로 html 파일이 넘어올 시 html 코드가 넘어옴(화면이 변경되지 않음)
          success: function(res) {
              console.log("성공", res);
          },
          // 요청이 실패했을 때 실행되는 부분
          error: function () {
              console.log("실패");
          }
      })
    }
  </script>
</html>

컨트롤러에서 DTO 객체로 받기(POST 방식도 동일)

	@GetMapping("/ex05")
	@ResponseBody
	// @ModelAttribute : name과 속성이 같으면 DTO객체로 만들어 줌(생략도 가능)
	// 필드값이 다 세팅된 DTO객체 생성됨
	public AjaxDTO ex05(@ModelAttribute AjaxDTO ajaxDTO) {
		System.out.println("ajaxDTO = " + ajaxDTO);
		return ajaxDTO;  //스프링이 객체를 json형태로 변환
	}

@RequestBody : 요청의 Body에서 값을 가져다가 DTO 객체 생성

	@PostMapping("/ex07")
	@ResponseBody
	// 보여지는 차이는 없음
	// 보낼때 JSON으로 보내는것, @RequestBody : 요청의 Body에서 가져올 수도 있다.
	// 필드값이 다 세팅된 DTO객체 생성됨
	public AjaxDTO ex07(@RequestBody AjaxDTO ajaxDTO) {
		System.out.println("ajaxDTO = " + ajaxDTO);
		return ajaxDTO;  //스프링이 객체를 json형태로 변환
	}

  <script>
    const ex07Fn = () => {
        const val1 = "Hello SpringBoot!!";

        const params = {
            "param1": val1,
            "param2": "안녕"
        };
      $.ajax({
        // 요청방식 : post
          // 요청주소 : /ex07
          type: "post",
          url: "/ex07",
          // parameter 전달하기(기존 : 자바스크립트 오브젝트 -> JSON 형태로 변환해서 보내기)
          data: JSON.stringify(params),
          contentType: "application/json", // 이 파라미터는 Json 형태다 명시
          // 요청이 끝나고 어떻게 처리할지 정의가 필요함
          // 여러 방식이 있음(done 등 체이닝 함수도 있음)
          // 요청이 성공했을 때 실행되는 부분
          // res 응답으로 html 코드가 넘어옴, 화면이 변경되지 않음
          success: function(res) {
              console.log("성공", res);
              console.log("param1", res.param1); // param1값만 볼수도 있음
          },
          // 요청이 실패했을 때 실행되는 부분
          error: function () {
              console.log("실패");
          }
      })
    }
  </script>

list 리턴 받기 : Ajax에 리스트를 리턴하면, 리스트로 활용할 수 있음
- DTO 객체에서 JSON형태 데이터를 받을 때 AllArgsConstructor로 생성자를 활용하면 오류날 수 있음
- 아래와 같이 수정

@Getter
@Setter
@ToString
public class AjaxDTO {
	private String param1;
	private String param2;

	// 커스텀 생성자 추가
	@JsonCreator
	public AjaxDTO(@JsonProperty("param1") String param1, @JsonProperty("param2") String param2) {
		this.param1 = param1;
		this.param2 = param2;
	}
}

	// 리스트 데이터 생성(DB를 활용하지 않았기에 임의로 만드는 메서드 생성)
	private List<AjaxDTO> DTOList() {
		List<AjaxDTO> dtoList = new ArrayList<>();
		dtoList.add(new AjaxDTO("data1", "data11"));
		dtoList.add(new AjaxDTO("data2", "data22"));
		return dtoList;
	}
    
	@PostMapping("/ex08")
	@ResponseBody
	// 보낼때 JSON으로 보내는것, @RequestBody : 요청의 Body에서 가져올 수도 있다.
	// 임의의 리스트 반환
	public List<AjaxDTO> ex08(@RequestBody AjaxDTO ajaxDTO) {
		System.out.println("ajaxDTO = " + ajaxDTO);
		List<AjaxDTO> dtoList = DTOList();
		dtoList.add(ajaxDTO);
		return dtoList;
	}

Ajax에서 리스트 활용

  <script>
    const ex08Fn = () => {
        const val1 = "Hello SpringBoot!!";

        const params = {
            "param1": val1,
            "param2": "안녕"
        };
      $.ajax({
        // 요청방식 : post
          // 요청주소 : /ex08
          type: "post",
          url: "/ex08",
          // parameter 전달하기(기존 : 자바스크립트 오브젝트 -> JSON 형태로 변환해서 보내기)
          data: JSON.stringify(params),
          contentType: "application/json", // 이 파라미터는 Json 형태다 명시
          // 요청이 끝나고 어떻게 처리할지 정의가 필요함
          // 여러 방식이 있음(done 등 체이닝 함수도 있음)
          // 요청이 성공했을 때 실행되는 부분
          // res 응답으로 html 코드가 넘어옴, 화면이 변경되지 않음
          success: function(res) {
              console.log("성공", res);
              console.log(res[0]);
              console.log(res[1].param1);
              for(let i in res) {
                  console.log("i: ", i);
                  console.log(res[i]);
              }
          },
          // 요청이 실패했을 때 실행되는 부분
          error: function () {
              console.log("실패");
          }
      })
    }
  </script>

ResponseEntity 방식 : HTTP Status, Header, body 정보를 가지고 있음

ResponseBody보다 많은 정보
return 타입은 없고, return new RsponseEnetity<>(dto, httpstatus) 이런식 반환
data없이 stausCode만 반환할 수도 있음.

	@PostMapping("/ex09")
		// 보낼때 JSON으로 보내는것, @RequestBody : 요청의 Body에서 가져올 수도 있다.
		// ResponseEntity : 헤더 정보, StatusCode, Body 정보 포함, ResponseBody보다 좀 더 포괄적 리턴 방식
		// ResponseEnetity 사용할 경우 return 타입 쓰지 않음
		public ResponseEntity ex09(@RequestBody AjaxDTO ajaxDTO) {
			System.out.println("ajaxDTO = " + ajaxDTO);
			// return new ResponseEntity<>(HttpStatus.OK);  // 데이터가 아닌 status 코드 반환, 보통 처리 결과만 반환할 때 사용
			return new ResponseEntity<>(ajaxDTO, HttpStatus.OK); // 응답코드와 데이터를 같이 보낼 수도 있음(DTO자라에 리스트 보낼수도 있음)
		}

 <script>
const ex09Fn = () => {
    const val1 = "Hello SpringBoot!!";

    const params = {
        "param1": val1,
        "param2": "안녕"
    };
  $.ajax({
    // 요청방식 : post
      // 요청주소 : /ex09
      type: "post",
      url: "/ex09",
      // parameter 전달하기(기존 : 자바스크립트 오브젝트 -> JSON 형태로 변환해서 보내기)
      data: JSON.stringify(params),
      contentType: "application/json", // 이 파라미터는 Json 형태다 명시
      // 요청이 끝나고 어떻게 처리할지 정의가 필요함
      // 여러 방식이 있음(done 등 체이닝 함수도 있음)
      // 요청이 성공했을 때 실행되는 부분
      // res 응답으로 html 코드가 넘어옴, 화면이 변경되지 않음
      success: function(res) {
          console.log("성공", res);
          console.log("성공", res.param1);
      },
      // 요청이 실패했을 때 실행되는 부분
      error: function () {
          console.log("실패");
      }
  })
}
</script>

박철현

비슷한 어려움을 겪는 누군가에게 도움이 되길

이전 포스트

프로그래머스 - 배열의 원소 삭제하기

다음 포스트

영상후기 - ajax 다뤄보기

영상후기

프로그래머스 - 배열의 원소 삭제하기

[영상후기] 백엔드 개발자라면 반드시 알아야하는 ERD로 관계형 데이터베이스 설계해보기

0개의 댓글

관련 채용 정보