Jquery를 이용한 Ajax 패턴 예제
let index = {
init: function(){
$("#btn-save").on("click", ()=>{
this.save();
});
},
save: function(){
let data = {
title: $("#title").val(),
content: $("#content").val(),
};
$.ajax({
type: "POST",
url: "/api/board",
data: JSON.stringify(data), //http body 데이터
contentType:"application/json; charset=utf-8",
dataType:"json"
}).done(function(resp){
alert("글쓰기가 완료되었습니다.");
//
location.href="/";
}).fail(function(error){
alert(JSON.stringify(error));
});
},
} //////// let index 영역
index.init();ajax의 type은 GET 방식이 Default
|
장점
|
< 참고 > |
1. jquery Ajax 기본 메서드
$.ajax( url [, settings ] );
---> 사용예제 보기
2. jquery Ajax 부가 메서드
1) $.get(url [,data][,success][,dataType]) get 방식으로 ajax 를 수행함
2) $.post(url [,data][,success][,dataType]) post 방식으로 ajax 를 수행함
3) $.getJSON(url [,data][,success]) get 방식으로 ajax 를 수행하여 json 데이터를 가져옴 (jsonp 사용가능)
4) $.getScript(url [,success]) get 방식으로 ajax 를 수행하여 javascript 데이터를 가져옴
5) $(selector).load(url [,data][,complete]) ajax를 수행한 후에 선택자로 선택한 문서
객체 안에 응답 데이터를 넣음
3. jquery Ajax 보조 메서드
1) $.param( obj ) 객체의 내용을 요청 매개 변수 문자열로 만듬
예제보기
2) .serialize() 입력 양식의 내용을 요청 매개 변수 문자열로 만듬
예제보기
3) .serializeArray() 입력 양식의 내용을 객체로 만듬
예제보기4. jquery Ajax 이벤트 연결 메서드
- spinner 구현 등에 사용 ( 아래 순서대로 이벤트 실행 )
- 만약 $.ajax() 나 $.ajaxSetup() 의 global 옵션값이 false 이면 이벤트 핸들러는 작동하지 않음
1) .ajaxStart( handler ) ajax 요청을 시작할 때 실행
2) .ajaxSend( handler ) ajax 요청을 보낼 때 실행
3) .ajaxSuccess( handler ) ajax 요청이 성공할 때 실행
4) .ajaxError( handler ) ajax 요청이 실패할 때 실행
5) .ajaxComplete( handler ) ajax 요청이 완료될 때 실행
6) .ajaxStop( handler ) ajax 요청을 중지할 때 실행
$.ajax({
type: 'POST',
url: 'test/test.jsp',
data: dataParam,
async: false,
success: function(data) {
if(data != null) {
}
}
});