Ajax 요청 시 dataType과 contentType

FrontEnd/Ajax

DevNoah 2023. 1. 31. 09:33

Ajax에서 POST 요청을 보낼 때 흔히 사용하는 통신 옵션이 있다.

바로 dataType과 contentType인데, 오늘은 이 두가지의 차이점을 정리해보고자 한다.

먼저 Ajax를 이용하여 서버에 데이터를 POST 방식으로 전송할 때는 아래와 같은 방식을 이용한다.

$.ajax({
      type: 'POST',
      url: url,
      data: data,
      success: success,
      dataType: dataType
});

여기서 dataType 옵션을 살펴보자.

dataType 옵션이란, 응답 값으로 서버에서 어떤 타입을 응답 받을 건지를 의미한다.

응답 값의 종류로는 JSON, HTML, TEXT 등의 값이 존재하는데, 지정하는 값에 따라 다른 응답 닶을 받을 수 있다.

dataType : "JSON" 인 경우이다.

dataType을 JSON으로 지정하고 { "id" : "1", "name" : "noah" } 라는 값을 서버에 POST하면 정상 응답 시

{"success" : true} 라는 응답 값을 받을 수 있다.

dataType : "html" 이라면 서버의 정상적인 통신 완료 시 응답 값을 html 데이터 타입으로 데이터를 전송받을 수 있다.

다음은 contentType이다.

dataType이 서버에서 응답 받는 값의 데이터 타입이라면 contentType은 서버에 전송하는 데이터의 타입이다.

contentType을 옵션으로 선택하지 않았을 때

기본 값은 contentType : 'application/x-www-form-urlencoded; charset=utf-8'이다.

이외에 자주 타입으로는 아래의 코드가 있다.

contentType: 'application/json; charset=utf-8'

Ajax에 대해 검색 중 잘 정리되어 있는 블로그를 발견하여 추가적으로 아래에 첨부한다.

[jQuery] ajax 사용하는 방법

[jQuery] ajax 사용하는 방법 웹브라우저에서 비동기식 데이터 통신을 할때 가장 많이 사용하는 것이 jQuery의 ajax 이다. 사용방법은 $.ajax 이다. 기본 문법은 아래와 같다. [기본형] jQuery.ajax( [setting] )

electronic-moongchi.tistory.com