ajax 코드를 화면마다 길게 작성을 하는 것보단
공통코드화(함수화) 시켜서
코드를 짧게 사용하고 싶어 만든 코드입니다.
먼저 ajax를 사용하여 백앤드 호출하는 코드입니다.
$.ajax({
type : 'GET',
url : "api/example",
data : {},
dataType : "json",
success : function(data) {
// 성공시 로직
},
error : function() {
// 에러시 로직
}
});
이런 식으로 화면마다 작성하게 됩니다.
이제 함수화를 시켜보겠습니다.
따로 transaction.js 파일을 만들어서 작성하겠습니다.
transaction.js (사용언어에 따라 조금씩 수정해서 사용해 주시면 되겠습니다.)
function transaction(svcId, type, url, inData, errorMsg, callback) {
var ajaxOptions = {
type: type,
url: url,
data: inData,
dataType: "json",
success: function(data) {
callback(data);
},
error: function(error) {
console.log(errorMsg);
}
};
if (type === "post") {
ajaxOptions.headers = {
"Content-Type": "application/json",
"X-HTTP-Method-Override": "POST"
};
}
$.ajax(ajaxOptions);
}
post 요청일 경우에만 Content-Type과 X-HTTP-Method-Override를 넣어줍니다.
백앤드 요청 성공 시 콜백함수를 선언해 줍니다.
백엔드 요청 실패 시 에러 문구를 띄워줍니다.
이제 index.jsp 에서 transaction.js를 사용하여
트랜잭션을 태워보겠습니다.
index.jsp (사용언어에 따라 조금씩 수정해서 사용해 주시면 되겠습니다.)
var svcId = "test";
var type = "GET";
var url = "/api/example";
var inData = {};
var errorMsg = "test error";
transaction(svcId, type, url, inData, errorMsg, fnCallback(svcId));
function fnCallback(svcId) {
return function(data) {
if (svcId === "test") {
console.log("svcId = " + svcId);
console.log("data = " + JSON.stringify(data));
}
}
};
변수를 선언한 후
tracsaction(~~) 함수를 태워 보내줍니다.
성공 시 fnCallback이라는 함수를 타게 되고 if 문안에 svcId가 test인 코드가 타게 됩니다.
콘솔창에는
svcId = test
data = [~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~]
가 나오게 됩니다.
트랜잭션 함수를 여러 번 태울 경우
$(document).ready(function() {
var svcId = "onload";
var type = "GET";
var url = "/api/onload";
var inData = {};
var errorMsg = "onload error";
transaction(svcId, type, url, inData, errorMsg, fnCallback(svcId));
$("#searchList").on("touchstart click", function(e) {
e.preventDefault();
var svcId = "test";
var type = "GET";
var url = "/api/example";
var inData = {};
var errorMsg = "error";
transaction(svcId, type, url, inData, errorMsg, fnCallback(svcId));
});
function fnCallback(svcId) {
return function(data) {
if (svcId === "onload") {
console.log("svcId = " + svcId);
console.log("onload 성공");
}
if (svcId === "test") {
console.log("svcId = " + svcId);
console.log("data = " + JSON.stringify(data));
}
}
};
이런 식으로 콜백함수에 svcId === "" 일 때 {}로 추가 작성해 주시면 되겠습니다.
위의 코드에서 불편한 점은
return function(data) {} 를 넣어야 한다는 점과
success했을 때 data가 없는 경우(저장한 후 로직)
에러가 난다는 점입니다.
수정된 코드입니다.
/*
* 01. JS명 : transaction.js
* 02. 내용
* ● svcId : 트랜잭션 ID
* ● type : Http Method(GET, POST, PUT, DELETE)
* ● url : api 호출 url
* ● inData : 송신 {json형식}
* ● errorMsg : 에러메시지
* ● callback : 콜백함수(고정)
* 03. 작성자 : JaeYong's coding
* 04. 사용예시
* ● var svcId = "test";
* var type = "GET";
* var url = "/";
* var inData = {};
* var errorMsg = "error";
*
* transaction(svcId, type, url, inData, errorMsg, fnCallback);
*
* ● function fnCallback(svcId, data) {
* if (svcId === "test") {
* // 콜백 코드 작성
* }
* };
*/
function transaction(svcId, type, url, inData, errorMsg, callback) {
var ajaxOptions = {
type: type,
url: url,
data: inData,
/*dataType: "json",*/
success: function(data) {
if (data) {
callback(svcId, data);
} else {
data = '';
callback(svcId, data);
}
},
error: function(error) {
console.log(errorMsg);
}
};
if (type === "POST") {
ajaxOptions.headers = {
"Content-Type": "application/json",
"X-HTTP-Method-Override": "POST"
};
}
$.ajax(ajaxOptions);
}
위의 js 형식으로 만들어주고
실제 사용은 (위에 트랜잭션 호출 방식은 동일합니다.
function fnCallback(svcId, data) {
if (svcId === "search") {
// ajax success 했을 때 로직
}
}
'Web Programming > jQuery' 카테고리의 다른 글
[jQuery] 제이쿼리 웹앱(web/app)에서 서명/사인(sign) 만들고 조회하기 (0) | 2024.05.20 |
---|---|
[jQuery] date타입 공통코드 만들기(자동 날짜 설정 (오늘, n일후, n일전 등)/ date 모듈화) (1) | 2024.02.28 |