Spring Boot에서 ajax로 JSON 데이터 보내고 받기

by

Spring Boot와 Ajax를 활용하여 클라이언트에서 JSON 데이터를 서버로 전송하고, 서버에서 해당 데이터를 받는 예제를 살펴보겠습니다. 이를 통해 웹 애플리케이션에서의 비동기 통신 및 데이터 전송에 대한 이해를 높일 수 있습니다.



1. 컨트롤러 작성

프로젝트에 YourController라는 컨트롤러를 작성합니다.

// YourController.java

@RestController
@RequestMapping("/")
public class YourController {

    @PostMapping
    public String handleJsonData(@RequestBody String jsonData) {
        // 클라이언트에서 전송한 JSON 데이터를 받아 처리
        System.out.println("Received Data: " + jsonData);

        // 여기서 데이터를 가공하거나 다른 작업 수행

        // 클라이언트에 응답
        return "서버에서 데이터를 성공적으로 받았습니다.";
    }
}



2. 클라이언트 작성

HTML 파일에서 클라이언트 코드를 작성합니다. jQuery를 사용하여 Ajax 요청을 수행합니다.

<script>
function sendData() {
    // 보낼 JSON 데이터 생성
    var jsonData = {
        name: "John Doe",
        age: 25,
        city: "New York"
    };

    // Ajax 요청
    $.ajax({
        type: "POST",
        url: "http://localhost:8080/",  // Spring Boot 어플리케이션의 URL로 변경
        contentType: "application/json",
        data: JSON.stringify(jsonData),
        success: function(response) {
            // 서버에서의 응답을 처리
            console.log(response);
        },
        error: function(error) {
            console.error("에러 발생:", error);
        }
    });
}
</script>




Leave a Comment