728x90
자주 쓰이는 jQuery AJAX 예제
개발일정에 치여 도무지 블로깅 할 시간이 안나 미치겠네요. 새로운 것 정리하기는 힘들고 자주 사용하고 있는 Ajax 패턴 정리해 봅니다.
Ajax 구현할 때는 거의 jQuery 를 활용하고 있습니다. 모바일 웹 구현할 때 네이티브 앱과 같은 UX 를 위해 Ajax 를 많이 사용하게 됩니다.
■로그인
로그인은 보통 화면에서 폼 값을 입력한 후 해당 값과 함께 ajax 호출합니다.
호출된 액션에서 로그인 관련 인증 및 예외처리 프로세스를 돌인 후
인증 상태에 따라 결과 값을 출력합니다.
출력된 값에 따라 로그인 페이지에서 경고를 띄우든 다음 페이지로 진행하든 처리하죠.
ajax 루틴을 돌고 있을 때 사용할 로딩 바를 띄우는 작업도 함께 해주면 좀더 나은 UX 를 구현할 수 있겠죠.
- login view script
<script>
function checkLogin(){
if( $.trim($("#userId").val()) == '' ){
alert("아이디를 입력해 주세요.");
$("#userId").focus();
return;
}
if( $.trim($("#userPw").val()) == '' ){
alert("비밀번호를 입력해 주세요.");
$("#userPw").focus();
return;
}
// 로그인 프로세스 호출
$.ajax({
type: 'post'
, async: true
, url: '/member.do?cmd=login'
, data: $("#frm").serialize()
, beforeSend: function() {
$('#ajax_load_indicator').show().fadeIn('fast');
}
, success: function(data) {
var response = data.trim();
console.log("success forward : "+response);
// 메세지 할당
switch(response) {
case "nomatch":
msg = "아이디 또는 비밀번호가 일치하지 않습니다."; break;
case "fail":
msg = "로그인에 실패 했습니다."; break;
default :
msg = "존재하지 않는 사용자입니다."; break;
}
// 분기 처리
if(response=="success"){
window.location.href = "${targetUrl}";
} else {
alert(msg);
}
}
, error: function(data, status, err) {
console.log("error forward : "+data);
alert('서버와의 통신이 실패했습니다.');
}
, complete: function() {
$('#ajax_load_indicator').fadeOut();
}
});
}
</script>
- login view html
<form id="frm" name="frm" method="post" action="" onSubmit="checkLogin();return false;">
<fieldset>
<legend>login</legend>
<div class="login_item mg_top34">
<label>id</label>
<input id="userId" name="memberVo.xcWebMbrId" type="text" class="i_login" />
</div>
<div class="login_item mg_top10">
<label>password</label>
<input id="userPw" name="memberVo.xcPswd" type="password" class="i_login" />
</div>
<div id="ajax_load_indicator" style="display:none">
<p style="text-align:center; padding:16px 0 0 0"><img src="/mobile/common/img/ajax-loader-line.gif" /></p>
</div>
<p class="keeping mg_left89">
<input id="keepidpw" class="rd_box22" value="1" type="checkbox" name="idPswdSave" >
<label for="keepidpw">ID/PW 저장</label>
</p>
<p class="keeping mg_left20">
<input id="keepid" class="rd_box22" value="1" type="checkbox" name="idSave" >
<label for="keepid">ID 저장</label>
</p>
<span class="btn_login">
<input type="image" src="<%=imageUrl%>/btn/btn_login.jpg" title="로그인" onclick="checkLogin();return false;">
</span>
<p class="btn_register"><a href="/member.do?cmd=memberJoin"><img src="<%=imageUrl%>/btn/btn_join.jpg" alt="회원가입" /></a>
<a href="/member.do?cmd=goIdPwFind" class="mg_left5"><img src="<%=imageUrl%>/btn/btn_sch.jpg" alt="아이디/비밀번호 찾기" /></a></p>
</fieldset>
</form>
- login ajax result
<%@ include file="/mobile/common/include/config.jsp" %>
${result}
■내용 추가
페이지 하단으로 스크롤 이동했을 때 추가되는 자동으로 다음 페이지 데이터가 추가되는 UX를 구현할 때 사용하는 기법으로 jQuery 의 append() 함수를 사용할 수 있다.
- product list view script
<script>
function paging(){
count++;
$.ajax({
type: 'post'
, async: true
, url: "/display.do?cmd=productListAppend&ordFlag="+'${ordFlag}'+"&categoryCd="+categoryCd+"&itemCode="+'${itemCode}'+"&count="+count
, beforeSend: function() {
$('#ajax_load_indicator').show().fadeIn('fast');
}
, success: function(data) {
var response = data.trim();
console.log("success forward : "+response);
// 상품 리스트 할당
$('#view_list').append(response);
$('#product_count').html($('#view_list li.thumb').size());
}
, error: function(data, status, err) {
console.log("error forward : "+data);
alert('서버와의 통신이 실패했습니다.');
}
, complete: function() {
$('#ajax_load_indicator').fadeOut();
}
});
}
</script>
- product list view html
<!-- 상품 목록 -->
<div id="view_list" class="product_list" style="display: none;">
<c:forEach var="list" items="${returnMap}">
<a href="/display.do?cmd=productView&brandCd=${list.brandCd }&prodCd=${list.prodCd }&ordFlag=${ordFlag }&styleYY=${list.styleYY }&priceDpYn=${list.priceDpYn }&listPrice=${list.listPrice }&categoryCd=${categoryCd}&itemCode=${itemCode}&rNum=${list.rNum }&count=${count}">
<ul>
<li class="thumb"><img src="${list.listImg }" alt="상품이미지" /></li>
<li class="b_title"><span class="brand">[${list.brandNm }]</span><span class="title">${list.prodNm }</span></li>
<li class="price">
<c:if test="${list.priceDpYn eq 'Y'}">
${list.listPrice }원
</c:if>
<c:if test="${list.priceDpYn eq 'N'}">
<span><a href="#"><img src="<%=imageUrl%>/common/ic_login.png" alt="로그인" /></a></span>
</c:if>
</li>
<li class="btn_go"><img src="<%=imageUrl%>/btn/btn_go.png" alt="" /></li>
</ul>
</a>
</c:forEach>
</div>
<div id="ajax_load_indicator" style="display:none">
<p style="text-align:center; padding:14px 0 14px 0"><img src="/mobile/common/img/ajax-loader-line.gif" /></p>
</div>
<!-- 더보기 bar-->
<div class="more_bar">
<a href="javascript:paging()">
<ul class="sec01">
<li class="btn_arr"><img src="<%=imageUrl%>/common/arr_down.png" alt="" /></li>
<li class="text_more">15개 더보기</li>
<li class="text_num"><span id="product_count">${total}</span> / 999</li>
</ul>
</a>
<p><a href="#"><img src="<%=imageUrl%>/btn/btn_top.jpg" alt="맨위로" /></a></p>
</div>
- append view html
<%@ include file="/mobile/common/include/config.jsp"%>
<!-- 상품 목록 -->
<c:forEach var="list" items="${returnMap}">
<a href="/display.do?cmd=productView&brandCd=${list.brandCd }&prodCd=${list.prodCd }&ordFlag=${ordFlag }&styleYY=${list.styleYY }&priceDpYn=${list.priceDpYn }&listPrice=${list.listPrice }&categoryCd=${categoryCd}&itemCode=${itemCode}&rNum=${list.rNum }&count=${count}">
<ul>
<li class="thumb"><img src="${list.listImg }" alt="상품이미지" /></li>
<li class="b_title"><span class="brand">[HAZZYS]</span><span
class="title">${list.prodNm }</span></li>
<li class="price">
<c:if test="${list.priceDpYn eq 'Y'}">
${list.listPrice }원
</c:if>
<c:if test="${list.priceDpYn eq 'N'}">
<span><a href="#"><img src="<%=imageUrl%>/common/ic_login.png" alt="로그인" /></a></span>
</c:if>
</li>
<li class="btn_go"><img src="<%=imageUrl%>/btn/btn_go.png" alt="" /></li>
</ul>
</a>
</c:forEach>
[출처 - http://skystory.kr/]
728x90
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| quick menu 바 (0) | 2013.07.19 |
|---|---|
| javascript 브라우저 종류 (0) | 2012.11.23 |
| jQuery 요약 (0) | 2011.08.02 |
| 자바스크립트 실수 모음 (0) | 2011.05.20 |
| 자바스크립트 팁 (0) | 2011.05.20 |