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

[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'가 보이며, 눌러보면, 서버에서 받은 데이터의 결과를 확인할 수 있습니다.