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