본문 바로가기

Development/Coding

자주 쓰이는 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>





* 폰갭의 약진 *

폰갭 클라우드 서비스 각 단말기 고유의 SDK 를 포함한 Total Wrap 서비스 제공!
폰갭 API 가 이젠 볼만하게 포매팅되어 제공되는군요. 

'Development > Coding' 카테고리의 다른 글

CSS 3 rotate 45deg 테스트  (0) 2010.12.17
PHP Variable Tests  (0) 2010.12.07
스크롤 이벤트 활용  (1) 2010.09.12
자바스크립트로 숫자만 판단할 경우  (0) 2010.08.26
JQTouch 치트쉬트  (0) 2010.08.14