[jQuery] Ajax 정복하기

AJAX 정복하기

 

🩸이슈 발생

정말 모든 파일에 다 들어가있는 AJAX.. AJAX 정복이 시급했다.

안보인게 더 많다

 

728x90

 

---

🩹이슈 해결

1. AJAX 개념

- 비동기 방식으로 클라이언트-서버 간에 데이터 교환하는 기능

* 비동기 방식:  페이지 새로고침, 화면 이동 없이 작업하는 것. ex) 댓글쓰기

- 자바스크립트 + 제이쿼리 기반

 

 

2. 기본형식

$.ajax({
    type:"post",//요청 메소드 방식
    url : "/AjaxTest/ex01.do",//요청url
    data:{
    //보낼 데이터
    },
    dataType: "text",			
        //서버가 요청url을 통해서 응답하는 내용의 타입
        //데이터 전달받을때 어떤 타입으로 줄건지

    success: function(result){
        //서버의 응답 데이터가 클라이언트에게 도착하면 자동실행되는 콜백 함수
        //result = 응답 데이터
        //정확하게 잘 되면 result(서버에서 리턴해주는 값) 가지고 success 탐
    },

    error: function(e){
        //통신 실패시 발생하는 콜백 함수
        //에러코드(404,500...),에러메세지 ...
    }

});

 

2-1. 예시

var URL = '/insertAvailableMoney.do';
var formData = new FormData(document.getElementById("frm"));

$.ajax({
    type: 'POST',
    url: URL,
    data: formData,
    processData: false,	// 데이터 그대로 전달
    contentType: false, // type 미설정 : multipart 형식으로 요청 전송
    success: function(data) {
        alert(data.resultMessage);
        location.reload();
    },
    error: function(data) {
        alert(data.resultMessage);
        location.reload();
    }
});

- type : GET or POST 

- url : 컨트롤러 경로

- data: 보낼 데이터 , 예시에서는 id='frm'인 폼 안의 모든 데이터를 가져옴

- processData : 데이터 가공 여부

- contentType : 데이터 타입 (json, html, text 등등) 

- success : ajax 요청 성공 시 처리할 함수

- error : ajax 요청 실패 시 처리할 함수

 

 

3. 폼 안에 있는 데이터 이외에도 전달하려면?

 

formData.append 사용

 

- formData.append 사용해서 추가로 서버로 전달 가능하다. 단, 해당 AJAX 보다 앞에(코드 위에) 사용되어야 함.

 

컨트롤러에서 받아서 OLD_WITHDRAW 잘 사용중

 

---

💡유의사항

시점차이가 생기니 꼭 모든 선언, 데이터 가공은 AJAX 앞(코드 위)에서 진행되어야 한다.