jQuery의 $.ajax()를 사용할 때 클라이언트(View)와 서버(Controller)가
맞춰야 할 형식을 정확히 일치시키는 것이 중요하다.

Content-Type과 데이터 전송 방식을 일치시키지 않으면
요청이 실패하거나 데이터가 정상적으로 전달되지 않을 수 있다.

$.ajax()의 요청 형식

$.ajax({
    url: "/api/user",
    type: "POST",  // HTTP 요청 방식 (GET, POST, PUT, DELETE)
    contentType: "application/json",  // 요청 데이터의 형식
    data: JSON.stringify({ username: "json", age: 25 }),  // 전송할 데이터
    success: function(response) { 
        console.log("응답:", response);
    },
    error: function(xhr, status, error) { 
        console.error("에러:", error);
    }
});

• url : 요청을 보낼 URL
• type : 요청 방식 (GET, POST, PUT, DELETE 등)
• contentType : 요청 본문의 데이터 형식
  (application/json, application/x-- www-form-urlencoded 등)
• data : 서버로 보낼 데이터
• success : 요청 성공 시 실행할 콜백 함수
• error : 요청 실패 시 실행할 콜백 함수

1) JSON 데이터 전송 (Content-Type: application/json)

• @RequestBody 를 사용하여 JSON 데이터를 User 객체로 매핑
• 클라이언트에서 JSON을 보낼 때는 반드시 contentType: "application/json"을 설정해야 함

jQuery AJAX 요청

$.ajax({
    url: "/api/user",
    type: "POST",
    contentType: "application/x-www-form-urlencoded",
    data: { username: "json", age: 25 },
    success: function(response) { 
        console.log("응답:", response);
    },
    error: function(xhr, status, error) { 
        console.error("에러:", error);
    }
});

Spring Controller (JSON 데이터 처리)

@PostMapping("/user")
    public ResponseEntity<String> saveUser(@RequestBody User user) {
        System.out.println("받은 데이터: " + user.getUsername());
        return ResponseEntity.ok("User saved successfully");
    }

2) Form 데이터 전송
(Content-Type: application/x-www-form-urlencoded)

• @RequestParam을 사용하여 개별 파라미터로 받음
• jQuery에서 데이터를 data: { key: value } 형식으로 보내면 Spring에서 자동으로 매핑됨

jQuery AJAX 요청

$.ajax({
    url: "/api/user",
    type: "POST",
    contentType: "application/x-www-form-urlencoded",
    data: { username: "json", age: 25 },
    success: function(response) { 
        console.log("응답:", response);
    },
    error: function(xhr, status, error) { 
        console.error("에러:", error);
    }
});

Spring Controller (폼 데이터 처리)

@PostMapping("/user")
    public ResponseEntity<String> saveUser(
            @RequestParam String username,
            @RequestParam int age) {
        System.out.println("받은 데이터: " + username);
        return ResponseEntity.ok("User saved successfully");
    }

3) 파일 업로드 (Content-Type: multipart/form-data)

• contentType: false, processData: false 설정 필수
• @RequestParam MultipartFile file로 파일을 받음

jQuery AJAX 요청

var formData = new FormData();
formData.append("file", $("#fileInput")[0].files[0]);
$.ajax({
    url: "/api/upload",
    type: "POST",
    contentType: false,  // 필수! 자동 설정됨
    processData: false,  // 필수! 자동 설정됨
    data: formData,
    success: function(response) { 
        console.log("응답:", response);
    },
    error: function(xhr, status, error) { 
        console.error("에러:", error);
    }
});

Spring Controller (파일 처리)

@RestController
@RequestMapping("/api")
public class FileController {

    @PostMapping("/upload")
    public ResponseEntity<String> uploadFile(@RequestParam MultipartFile file) {
        System.out.println("업로드된 파일: " + file.getOriginalFilename());
        return ResponseEntity.ok("File uploaded successfully");
    }
}

결론

• jQuery $.ajax()의 contentType을 Spring Controller의 매핑 방식과 맞춰야 한다.
• @RequestBody, @RequestParam, @ModelAttribute, MultipartFile을 요청 방식에 맞게 사용해야 한다.
• JSON 응답을 받을 경우 @ResponseBody 또는 @RestController를 사용해야 한다.