유블로그

[Spring] Spring-ajax : Annotation 과 간단한 사용 예시들 본문

Spring

[Spring] Spring-ajax : Annotation 과 간단한 사용 예시들

yujeong kang 2020. 11. 5. 17:04

REST 관련 Annotation

@RestController Controller 가 REST 방식을 처리하기 위한 것임을 명시
@ResponseBody JSP 같은 뷰로 전달되는 것이 아니라 데이터 자체를 전달
@PathVariable URL 경로에 있는 값을 파라미터로 추출
@CrossOrigin Ajax 크로스 도메인 문제를 해결
@RequestBody JSON 데이터를 원하는 타입으로 바인딩

@RestController
@RequestMapping("/country")  
public class CountryController {
	@Autowired
	private CountryService service;
	
	@PostMapping("/regist.do")
//	@ResponseBody
	public Map<String, Object> insertCountryStatus(CountryStatus countryStatus) {
		Map<String, Object> result = new HashMap<>();
		try {
			service.insertCountryStatus(countryStatus);
			result.put("result", "1");
		} catch (Exception e) {
			result.put("result", "0");
		}
		return result;
	}
}    

@RestController 를 사용하면 메소드 위에 @ResponseBody 안 붙여도 자동으로 데이터 자체를 전달한다.


ajax 옵션

data : 컨트롤러로 보낼 데이터 

dataType :  서버에서 반환되는 데이터 형식

 

$("#registForm").submit(function(e) {	
	e.preventDefault();	// 기본 이벤트 중단시킴

	$.ajax({
		url: `${root}/country/regist.do`,
		type: 'POST',
		data: $("#registForm").serialize(),	// 데이터받아서 쿼리스트링으로 넘겨주는 함수!!
		dataType: 'json',
		success: function(data) {
			if(data.result == "0") {
				alert("등록 시 문제가 발생했습니다.");
			} else {
				alert("코로나 현황 정보 등록 성공!");
				// 폼의 데이터를 빈값으로 변경. [0] 해야 순수html 객체 들고온다!!!! 주의!!!!!!!!!!!!********** 나 이거 항상 틀림
				$("#registForm")[0].reset();
			}
		},
		error: function() {
			alert("등록 시 문제가 발생했습니다.");
		}
	});
			
});

- 폼의 데이터를 들고와서 위의 컨트롤러에 전달하여 데이터를 json 형태로 받아 디비에 저장한다.


// 목록 이벤트
$("#viewList").click(function () {
	$.ajax({
		url: `${root}/country/list.do`,
//		type: 'GET',	// 디폴트가  GET 이라서 빼도됨
		dataType: 'json',
		success: function(data) {
			$("#listBody").html("");
			$.each(data, function(i, v){

			$("#listBody").append(`
                              <tr>
                              <td><a href="#">${v.ccode}</a></td>
                              <td>${v.cname}</td>
                              <td>${v.patient}</td>
                              <td>${v.rname}</td>
                              <td><input type="checkbox" name="ccodes" value="${v.ccode}"></td>
                              </tr>
                          `);
			});
		},
        error: function() {
        	alert("조회 시 문제가 발생했습니다.");
        }
	});
});

- ajax 를 통해 디비에서 데이터를 json 형태로 들고와서 html 에 뿌려준다.


@RequestMapping(value = "/user/{userid}", method = RequestMethod.GET, headers = { "Content-type=application/json" })
public MemberDto userInfo(@PathVariable("userid") String userid) {
	return userService.userInfo(userid);
}

@PathVariable

url 의 파라미터 userid 를 String userid에 연결해준다.


 

@RequestMapping(value = "/user", method = RequestMethod.POST, headers = { "Content-type=application/json" })
public List<MemberDto> userRegister(@RequestBody MemberDto memberDto) {
	userService.userRegister(memberDto);
	return userService.userList();
}

@RequestBody

form 에서 넘어온 데이터를 MemberDto 타입으로 바인딩