$.ajax

jQuery AJAX

•

jQuery ajax 개발문서

jQuery.ajax()

Data to be sent to the server. If the HTTP method is one that cannot have an entity body, such as GET, the data is appended to the URL.

https://api.jquery.com/jQuery.ajax

AJAX란?

•

AJAX (Asynchronous JavaScript and XML)

페이지 새로고침 없이 서버와 데이터를 주고받는 기술

핵심 포인트

요청 → 응답이 오기를 기다리지 않고도 화면은 계속 동작한다 (비동기)

jQuery AJAX 주요 메소드

$.ajax()

•

가장 기본이 되는 메소드

•

모든 HTTP 메소드 사용 가능 (GET, POST, PUT, DELETE)

단축 메소드

메소드	설명
$.get()	GET 요청
$.post()	POST 요청
$.getJSON()	JSON 데이터 요청

실무에서는 $.ajax()를 가장 많이 사용

$.ajax 주요 속성 ()

속성	설명
url	요청할 서버 주소
method, type	HTTP 메소드 (GET, POST, PUT, DELETE)
data	서버로 보낼 데이터
contentType	요청 데이터 타입
dataType	응답 데이터 타입
success	요청 성공 시 실행 함수
error	요청 실패 시 실행 함수
complete	success, error 함수 호출 후 실행되는 함수

기본 시작 코드

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
$.ajax({
    url: '/api/boards',
    method: 'GET',
    success: function(response) {
        console.log(response);
    },
    error: function(error) {
        console.error(error);
    }
});
</script>
HTML
복사

REST API 예시 구조

/api/boards
Plain Text
복사

메소드	의미	설명
GET	조회	게시글 목록 조회
POST	등록	게시글 생성
PUT	수정	게시글 수정
DELETE	삭제	게시글 삭제

요청 예시 & 설명

1. GET : 게시글 목록 조회

$.ajax({
    url: '/api/boards',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log('게시글 목록', data);
    }
});
JavaScript
복사

설명

•

서버에서 게시글 목록을 조회

•

data는 JSON 배열 형태

2. POST : 게시글 등록

$.ajax({
    url: '/api/boards',
    method: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
        title: 'AJAX 제목',
        content: 'AJAX 내용'
    }),
    success: function(result) {
        alert('등록 성공');
    }
});
JavaScript
복사

설명

•

JSON.stringify() → 객체를 JSON 문자열로 변환

•

contentType 반드시 지정

3. PUT : 게시글 수정

$.ajax({
    url: '/api/boards/1',
    method: 'PUT',
    contentType: 'application/json',
    data: JSON.stringify({
		    no: 1,
        title: '수정된 제목',
        content: '수정된 내용'
    }),
    success: function(result) {
        alert('수정 완료');
    }
});
JavaScript
복사

설명

•

URL에 게시글 ID 포함

•

전체 데이터 수정

4. DELETE : 게시글 삭제

$.ajax({
    url: '/api/boards/1',
    method: 'DELETE',
    success: function(result) {
        alert('삭제 완료');
    }
});
JavaScript
복사

설명

•

서버에 삭제 요청

•

보통 응답 데이터는 없음