Coding/Ajax

[Ajax] Ajax 기본 코드 작성 방법

잇뉴얼 2022. 6. 5. 15:35
728x90
반응형

[Ajax] Ajax 기본 코드 작성 방법

Ajax란 Asynchronous JavaScript and XML의 약자
★ 참고 ★
Ajax 를 사용하기 위해서는 HTML안에 JQuery 라이브러리가 포함되어있어야합니다. 포함이 되어있지 않을시에는 에러가 발생하게 됩니다.
JQuery 라이브러리 코드 : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 

기본 코드 작성 방법
$.ajax({
  type: "GET", // 혹은 POST, PUT, DELETE 작성 가능
  url: "URL 작성",
  data: {},  // type:"GET" 방식일 경우는 비워두기
  success: function(response){
    console.log(response)  // 받아온 데이터 결과 출력
  }
})
코드 설명 설명
type 'GET' 혹은 'POST'입력
GET : 데이터를 조회한다.
POST : 데이터를 추가한다.
PUT : 데이터를 수정한다.
DELETE : 데이터를 삭제한다.
url 데이터를 요청할 URL을 작성
data 요청하면서 함께 줄 데이터를 입력합니다.
(type : "GET"일 경우 조회만 하기 떄문에 비워두기)
success : function(response) {
    response를 활용한 추가 코드 작성
}		 요청이 정상적으로 된다면, response에 서버의 결과를 담아주며, response를 활용하여, 추가 코드를 작성하면, 해당 코드가 자동으로 실행된다.

success :function(response) {}안에 별다른 코드 작성 없이 'console.log(response)'만 작성이 되어있다면, 브라우저에서 'F12'단축키를 눌러주면, 'console'탭에 'Object'가 보이며, 눌러보면, 서버에서 받은 데이터의 결과를 확인할 수 있습니다.

반응형