커뮤니티 페이지(Cot)에서 ajax를 쓴 부분을 정리
게시물 조회시 댓글을 ajax방식으로 호출 했다.
1
2
3
4
5
6
7
8
9
10
11
|
//게시물 조회시 댓글 호출
function listReply() {
$.ajax({
type : "get",
url : "${path}/freereply/list.do?bnum=${dto.bnum}",
success : function(result) {
// responseText가 result에 저장됨.
$("#listReply").html(result);
}
});
}
| cs |
type은 통신 타입이다. POST 또는 GET을 선택할 수 있다.
url은 요청할 url로 글번호(bnum)에 맞는 댓글들을 불러오는 컨트롤러로 연결된다.
success는 성공적으로 요청/응답이 되면 listReply 부분에 결과를 html형식으로 표시한다.
해당 jsp에서는
<!-- 댓글 목록 위치 -->
<div id="listReply"></div>
으로 댓글 목록을 위치시켰다.
댓글 수정화면 댓글의 댓글 창또한 ajax를 이용해 새로고침 없이 창을 보이게 하였다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// 댓글 수정화면 생성
function showReplyModify(rnum) {
$.ajax({
type : "get",
url : "${path}/freereply/detail/" + rnum,
success : function(result) {
$("#modifyReply").html(result);
// 태그.css("속성", "값")
$("#modifyReply").css("visibility", "visible");
}
})
}
// 댓글의 코멘트 생성
function showReplyComment(rnum) {
$.ajax({
type : "get",
url : "${path}/freereply/commentwrite/" + rnum,
success : function(result) {
$("#ReplyComment").html(result);
// 태그.css("속성", "값")
$("#ReplyComment").css("visibility", "visible");
}
})
}
| cs |
로그인을 사이드 메뉴에서 구현하였다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
function signin() {
if($("#user_id").val()==""){
alert("아이디를 입력해주세요.");
$("#user_id").focus();
}else if($("#password").val() ==""){
alert("비밀번호를 입력해주세요");
$("#password").focus();
}else{
$.ajax({
url : './j_spring_security_check',
data : $('form input').serialize(),
type : 'POST',
dataType : 'json',
}).done(function(body) {
var message = body.response.message;
var error = body.response.error;
if (error)
get_msg(message);
if (error == false) {
var url = '${referer}';
if (url == '')
url = '<c:url value="/users/mypage" />';
location.href = url;
}
});
}
}
| cs |
앞의 if문은 아이디 비밀번호 체크이므로, ajax부터 본다면,
data는 서버에 요청시 보낼 파라미터이다.
dataType은 응답 받을 데이터 타입을 선택한다.(XML, TEXT, HTML, JSON 등)
아까랑 다르게 success가 아닌 done인데 같은의미인데 순서가 다른 것 같다.
검색해보니 success error 보다는 done fail 패턴이 동일한 요청에 대해 여러 성공 콜백을 호출할 때 함수 배열을 통해 더 깔끔?하게 처리해서 최근 done이 많이 쓰이는 것 같다...
beforesend에 대해서도 찾아볼 것
beforesend에 대해서도 찾아볼 것
