[PHP] 📗jQuery에서 Ajax 사용하기

Ajax에 대해 먼저 알아보기

• ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 기법입니다.
• 웹페이지 전체를 다시 로딩하지 않고 일부분의 화면만 바꾸주는 비동기 통신입니다.

🔸자세한 사항은 밑에 게시글 참고🔸

Ajax 기초

 

Ajax 동작 원리

---

$(document).ready(function(){
	$.ajax({
    	url: "./호출할 주소",
        type: "POST, GET",      // 둘 중에 원하는 방식으로 호출
        data: $("form").serialize(),
        dataType: "json",		// json 방식으로 전송
        success: function(data) {
        	// 통신이 성공적일 때 출력
        },
        error: function(shr, status, error){
        	// 통신이 실패했을 때 출력
            alert("ERROR MSG- xhr: " + xhr + ", status: " + status + ", error: " + error);
        }
    });
});

$.ajax({settings});에 들어갈 옵션들

• setting에는 ajax통신을 위한 옵션을 담고있는 객체가 들어간다.

속성명	설명
url	통신원하는 주소(= 서버로 보낼 주소)를 입력
data	통신 할 데이터를 넣는 곳 클라이언트에서 서버로 데이터를 전송할 때 사용하며, http요청 후 return하는 값   ※ $("form").serialize() : form의 하위 엘리먼트 데이터값 호출
type	POST, GET 방식의 데이터 전송방식   ※ default: GET방식이므로 따로 설정할 필요 없음
dataType	서버가 우리에게 돌려주는 데이터가 어떤 형식인지 설정(필수사항 아님) 다시말해, http요청 후 return하는 데이터의 Type을 지정해야함   ※ 옵셥이므로 json으로 받을 경우가 아니면 작성하지 않아도 jQuery가 알아서 판단해줌   ※ dataType 종류: xml, html, jsn, text, script
success	성공했을 때 콜백을 지정함
error	실패했을 때 콜백을 지정함