2022-12-12 json, text형식으로 데이터 받는 방법, Ajax에 대해서

 

@ResponseBody 어노테이션을 등록하면 뷰가 아닌 단순한 문자열이 리턴된다(json/text형식으로 데이터를 리턴). 메소드에 각각 써주는 방법이 있고 상단에 한 번 써주는 방법도 있다. 

 

@Controller와 함께 합칠수도 있는데 이 경우엔 @RestController 어노테이션을 등록해준다.

 

@RestController
//@Controller
//@ResponseBody 
@RequestMapping("/json")
public class JSONTestController {
	BoardService service;
	@Autowired
	public JSONTestController(BoardService service) {
		super();
		this.service = service;
	}
	@RequestMapping("/index")
	public String indexPage() {
		return "index"; 
	}

 

=> indexPage메소드에서 리턴되고 있는 "index"는 뷰가 등록돼있음에도 불구하고 단순한 "문자 index"가 리턴된다.  @ResponseBody 어노테이션을 사용했기 때문인데 @ResponseBody는 웹페이지를 응답하지 않고 response body에 스트링을 추가해서 응답하기 때문이다.

 

 

 

@RequestMapping("/getJsonObj")
	public BoardDTO responseObj() {
		return service.getBoardInfo("11");
	}

=> 글번호(board_no)가 11번인 게시글의 데이터를 json을 이용해 받아오기

 

 

 

@RequestMapping("/getJsonArr")
	public List<BoardDTO> responseJsonArr() {
		return service.findByCategory("all");
	}
}

=> List에 저장된 boardDTO타입 데이터도 json으로 변환해 받아올 수 있다.

 

 

 

 

JQuery로 Ajax처리하기

 

AJAX란 XMLHttpRequest객체를 이용하는 비동기통신이다. 화면 전체가 아니라 필요한 일부분만 수정작업을 할 수 있다.

ajax를 처리하는 방법은 여러가지가 있는데 오늘은 $ajax()를 이용한 방법에 대해 알아보았다.

 

[매개변수]
url : ajax로 요청할 path
type : 요청방식 - get or post
data : 서버로 전송할 데이터 - 서버로 보내서 처리할 데이터가 여러 개이면 json의 형식으로 처리
dataType : ajax처리 결과에 대한 타입 - text, json..
success : 서버와 통신이 성공했을 때 호출되는 함수
error : 서버와 통신이 실패했을 때 호출되는 함수

 

 

@Controller
@RequestMapping("/ajax")
public class AjaxTestController {
	BoardService service;
	@Autowired
	public AjaxTestController(BoardService service) {
		super();
		this.service = service;
	}
    // 처리 후 Response Body에 처리결과 문자열을 저장해서 보내기
    @RequestMapping(value = "/exam01", produces = "application/text;charset=utf-8")
	@ResponseBody
	public String ajaxexam(String board_no) {
		return service.getBoardInfo(board_no).toString();
	}
}

 

한글셋팅을 해준 후 입력한 번호의 게시글 정보를 jsp로 리턴한다.

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#noajaxbtn").on("click", function() {
            location.href="/erp/ajax/noajax?id="+$("#id1").val()
        })
    })

ajax를 적용하지 않은 방법으로 뷰화면 전체가 리로딩되고 사용자가 입력한 데이터가 초기화된다.

필요한 일정부부만 리로딩되면서 데이터가 초기화되지 않도록 ajax를 적용시켜보자.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#testbtn").on("click", function() {
			var ajaxdata = {"board_no":$("#board_no").val()}
			$.ajax({
				url:"/erp/ajax/exam01",
				type:"get",
				data:ajaxdata,
				success:success_run,
				error:error_run
			}) //end ajax
		}) //end click
	}) //end ready
    
	function success_run(txt) {
		$("#result").html("<h2>jquery:"+txt+"</h2>")
	}
	function error_run(obj,msg,statusMsg) {
		alert("오류발생"+obj+","+msg+","+statusMsg);
	}
</script>

=> ajax() 메소드를 이용하는 방법. jquery를 이용해 ajax() 메소드의 매개변수를 정의해준다.

url은 컨트롤러에서 실행시킬 메소드를, type은 get, post 어떤 방법으로 실행시킬 것인지, data에는 json객체 데이터를, success와 error에는 각각 메소드실행이 성공했을 때와 실패했을 때 실행시킬 함수를 정의해준다.

 

success_run 함수에서 받아오는 매개변수 "txt"는 컨트롤러에서 리턴한 값을 받아온 것이다.

 

 

 

Click! 개념정리