JS 모듈화, ajax (어렵..)

 

 

JS 모듈화

 

 

resources의 js 아래 reply.js 만들어줌

 

 

 

 

 

 

 

 

사용하는 view내 jsp 파일에 script 위에 추가해줌

 

<script type="text/javascript" src="/resources/js/reply.js">

 

 

 

 

 

---

reply.js

/**
 * 
 */
 
 console.log("reply module......");
 
 var replyService = (function(){
 
 

  function add(reply, callback, error){
  console.log("add reply........");
 
  $.ajax({
  type : 'post',
  url : '/replies/new',
  data : JSON.stringify(reply),
  contentType : "application/json; charset=utf-8",
  success : function(result, status, xhr){
  if(callback) {
  callback(result);
  }
  },
  error : function(xhr, status, er) {
  if (error) {
  error(er);
  }
  }
  })
  }
 
 
  return {add : add};



function getList(param, callback, error) {

var bno = param.bno;
var page = param.page || 1;

$.getJSON("/replies/pages/" + bno + "/" + page + ".json",
function(data){
if(callback){
callback(data);
}
}).fail(function(xhr, status, err) {
if(error){
error();
}
});
}

return {
add : add,
getList : getList
};




function remove(rno, callback, error){
$.ajax({
type : 'delete',
url : '/replies/' + rno,
success : function(deleteResult, status, xhr) {
if(callback){
callback(deleteResult);
}
},
error : function(xhr, status, er){
if(error) {
error(er);
}
}
});
}

return {
add : add,
getList : getList,
remove : remove
};



function update(reply, callback, error){


console.log("RNO : " + reply.rno);

$.ajax({
type : 'put',
url : '/replies/' + reply.rno,
data : JSON.stringfy(reply),
contentType : "application/json; charset=utf-8",
success : function(result, status, xhr){
if(callback){
callback(result);
}
},
error : function(xhr, status, er) {
if (error) {
error(er);
}
}
});
}

return{
add : add,
getList : getList,
remove : remove,
update : update
};



function get(rno, callback, error){

$.get("/replies/" + rno + ".json", function(result){

if(callback){
callback(result);
}
}).fail(function(xhr, status, err){
if(error){
error();
}
});
}

return {
add : add,
getList : getList,
remove : remove,
update : update,
get : get
};



})();

 

 

get.jsp

 

<script type="text/javascript" src="/resources/js/reply.js"></script>

<script>
$(document).ready(function(){

console.log("===========");
console.log("JS TEST");

var bnoValue = '<c:out value="${board.bno}"/>';


  //for replyService add test
  replyService.add(
{reply:"JS TEST", replyer:"tester", bno:bnoValue}
,
function(result){
alert("RESULT : " + result);
}
);  
 
 
//reply List Test
replyService.getList({bno:bnoValue, page:1}, function(list){

for(var i = 0, len = list.length||0; i < len; i++){
console.log(list[i]);
}
});


//23번 댓글 삭제 테스트
replyService.remove(23, function(count){

console.log(count);

if(count === "success"){
alert("REMOVED");
}
}, function(err){
alert('ERROR....');
});
 

//22번 댓글 수정
replyService.update({
rno : 22,
bno : bnoValue,
reply : "Modified Reply..."
}, function(result){

alert("수정 완료...");
});
 


// get 
replyService.get(10, function(data){
console.log(data);
});
 
});

</script>