사이트 구축/최적화 활용 팁

Javascript로 post 방식으로 ajax를 통신하여 쿠폰번호 검증 후 인증이 된 쿠폰번호를 테이블의 tr를 추가하여 보여주는 방법입니다.

1. 쿠폰번호 입력 여부 점검

- 쿠폰번호가 입력 되었는지를 확인합니다.

2. 입력한 쿠폰번호 기 등록 여부 점검

- 입력한 쿠폰번호와 인증이 완료된 쿠폰번호를 비교하여 기 등록 건이 있는지 점검합니다.
- 등록된 쿠폰번호가 1건 일 때와 2건 이상일 때로 나눠서 비교를 합니다.

3. 쿠폰 인증 post ajax 통신

- 입력된 쿠폰 인증을 위한 ajax 통신을 하며 post방식으로 전송을 합니다.
- $.post({}).done(function(data){}).fail(function(request, status, error) {})
- $.post : POST 방식 전송
- .done() : 성공하였을 때
- .fail() : 실패하였을 때

4. 쿠폰 인증 결과에 따른 처리

- 쿠폰이 인증이 되면 기 등록된 쿠폰의 합계 금액과 결제하려는 금액을 비교합니다.
- 쿠폰의 합계 금액이 더 크면 해당 쿠폰은 등록을 하지 않습니다.

5. 테이블에 인증된 쿠폰 행(TR) 추가

- $('#couponResultTable > tbody:last').append(trHtml); 방식으로 행을 추가합니다.

6. 테이블에 있는 쿠폰 삭제하기

- 삭제 버튼 클릭 시 해당 Object를 가져옵니다.
- 현재 Object는 td안에 있습니다. 그래서 <table><tr>로 올라기 위해서 .parent().parent()를 사용합니다. - deleteCouponRow.remove(); 를 사용하여 행을 삭제합니다. - 쿠폰을 삭제하면서 쿠폰 합계 금액도 삭제한 쿠폰 금액을 차감합니다.​

<div class="coupon-article">
  <h4>
    <span class="sub_bar"></span>
    보험료
  </h4>
  <div class="coupon-input-section">
    <input class="insert_coupon"type="text" name="couponNo" id="couponNo" placeholder="쿠폰번호를 입력해 주세요." title="쿠폰번호 입력창" />
    <button class="update_coupon" id="authCouponBtn">적용</button>
  </div>
  <div class="coupon-result-section table-area">
    <table id="couponResultTable" class="pdt-info-tbl" class="add_class_coupon" style="display:none;">
      <tr>
        <td class="table-sub">쿠폰번호</td>
        <td style="text-align:center;">할인금액</td>
        <td style="width: 33.333%; text-align:right;"></td>
      </tr>
      <tbody></tbody>
    </table>
  </div>
</div>

<div class="selected-total-area">
  <label for="selectedTotal">결제금액</label>
  <input class="total-price" type="text" id="finalPriceSpot" name="selectedTotal" value="2500"/>원
</div>

<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<script type="text/javascript">
/**
 * 쿠폰 인증 처리 및 쿠폰 삭제 처리 기능 스크립트
 */

// 쿠폰 합계 금액
var totalCouponAmt = 0;

// 인증하기 버튼 클릭 시
$("#authCouponBtn").click(function() {

  // 쿠폰번호
  var couponNoObj = $("input[name='couponNo']");
  var couponNo    = couponNoObj.val();

  // 홀인원 합계 보험료
  var totalPremiumObj = $("input[name='selectedTotal']");
  var totalPremium    = Number(totalPremiumObj.val());

  // 쿠폰번호가 입력 되었는지 점검한다.
  if ( couponNo == '' ) {
    alert('쿠폰 번호를 입력하여 주세요.');
    couponNoObj.focus();
    return;
  }
  // 쿠폰번호가 입력되었다면 쿠폰번호 인증 페이지를 호출한다.
  else {

    // 쿠폰 인증 결과가 있는지 점검
    var couponRetNoObj = $("input[name='couponRetNo']");

    // 쿠폰 인증 결과가 있다면 입력값과 비교를 한다.
    if ( couponRetNoObj.length > 0 ) {
      // 쿠폰 인증 결과가 1개일 때
      if ( couponRetNoObj.length == 1 ) {
        // 등록한 쿠폰번호와 쿠폰 인증 결과번호가 같다면
        couponRetNo = couponRetNoObj.val();
        if ( couponNo == couponRetNo ) {
          alert('등록하신 쿠폰 번호입니다.\r\n다른 쿠폰번호를 입력하여 주세요.');
          return;
        }
      } // End if ( couponRetNoObj.length == 1 ) 쿠폰 인증 결과가 1개일 때
      // 쿠폰 인증 결과가 2개 이상일 때
      else {
        for (var i = 0; i < couponRetNoObj.length; i++)
        {
          // 등록한 쿠폰번호와 쿠폰 인증 결과번호가 같다면
          couponRetNo = $(couponRetNoObj[i]).val();
          if ( couponNo == couponRetNo ) {
            alert('등록하신 쿠폰 번호입니다.\r\n다른 쿠폰번호를 입력하여 주세요.');
            return;
          }
        } // End for (var i = 0; i < couponRetNoObj.length; i++)
      } // End else 쿠폰 인증 결과가 2개 이상일 때
    } //End if ( couponRetNoObj.length > 0 ) 쿠폰 인증 결과가 있다면 입력값과 비교를 한다.


    // Post 방식으로 호출을 한다.
    $.post("쿠폰 인증 URL", {
        couponNo : couponNo
    }, 'json' /* xml, text, script, html */)
    .done(function(data) {

      var message = data.message;
      if ( message == 'Success' ) {
        // 인증이 정상적으로 되었으면 쿠폰번호와 쿠폰 금액을 셋팅한다.
        var cpn_no  = data.cpn_no;
        var cpn_amt = data.cpn_amt;
        totalCouponAmt += Number(cpn_amt);

        // 쿠폰 인증 결과 테이블이 display none 일때만 show 처리를 한다.
        if($("#couponResultTable").css("display") == "none")
        {
          $("#couponResultTable").show();
        }

        // 홀인원 합계 보험료보다 쿠폰 합계 금액이 크면 더 추가하지 않는다.
        if ( totalCouponAmt > totalPremium ) {
          alert('합계 보험료보다 쿠폰 합계 금액이 클 수 없습니다.');
          return;
        }

        var trHtml;
        trHtml += "<tr>";
        trHtml += "  <td class=\"table-sub\" >"+cpn_no+"</td>";
        trHtml += "  <td style=\"text-align:center;\">"+cpn_amt+"원</td>";
        trHtml += "  <td style=\"width: 33.333%; text-align:right;\">";
        trHtml += "    <button class=\"deleteCouponBtn\" onclick=\"deleteCoupon(this)\">삭제</button>";
        trHtml += "    <input type=\"hidden\" name=\"couponRetNo\" value=\""+cpn_no+"\">";
        trHtml += "    <input type=\"hidden\" name=\"couponRetAmt\" value=\""+cpn_amt+"\">";
        trHtml += "  </td>";
        trHtml += "</tr>";

        // 테이블의 행을 추가한다.
        $('#couponResultTable > tbody:last').append(trHtml);
      }
      else {
        alert('입력하신 쿠폰 번호가 인증되지 않아서 사용할 수 없습니다.\r\n\r\n쿠폰번호를 확인하여 주세요 ');
        return;
      }
    })
    .fail(function(request, status, error) {
      console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
      alert('입력하신 쿠폰 번호가 인증되지 않아서 사용할 수 없습니다.\r\n\r\n쿠폰번호를 확인하여 주세요 ');
    });
  }
});

// 삭제하기 버튼 클릭 시
function deleteCoupon(obj)
{
  // 삭제할 쿠폰 TR
  var deleteCouponRow = $(obj).parent().parent();

  // 차감할 쿠폰 금액
  var deleteCouponRetAmtObj = $(obj).next().next();
  var deleteCouponRetAmt = Number(deleteCouponRetAmtObj.val());

  // 지우는 쿠폰 금액을 쿠폰 합계에서 빼준다.
  totalCouponAmt -= deleteCouponRetAmt;

  // 쿠폰 입력 줄을 삭제한다.
  deleteCouponRow.remove();
}
</script>

ajax 통신은 비동기식 통신입니다.

onsubmit 이벤트에서 ajax 통신을 할 때, ajax 통신 결과와는 상관없이 submit 처리를 합니다.

그래서 async: false 와 event.preventDefault(); 로 처리를 할 수 있습니다.

이렇게 하게 하면 ajax 통신 결과 리턴 시간이 지연 될 것을 감안하여 올리는 로딩바가 구현이 되지 않습니다.

이 경우에는 로딩바를 먼저 노출되도록 처리를 하고 ajax 통신을 setTimeout과 결합하여 사용하면 로딩바가 나오게 됩니다.

최종적으로 ajax 통신 결과가 성공 일 때 submit이 안되는 현상이 발생을 하였습니다.

이 현상의 해법은 $.when($.ajax()).done().fail()과 currentTarget.submit()입니다.

며칠 동안 포스팅 했던 내용의 완결판입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <form name="theForm" action="" method="post" id="theForm">
    <input type="submit" />
  </form>

<script>
  $('#theForm').submit(function(event){
  
	// 자동 submit을 시키는 것을 막는다.
	event.preventDefault();

    /**
     * 입력 필드 validattion check 로직
     */
  

    /**
     * ajax로 다른 페이지를 처리 후에 결과가 성공일 때 전송 처리를 한다.
     */

    // ajax 통신을 설정합니다.
     var when =
   		$.ajax({
   			url:'[주소]',
   			type:'post',
   			data:$('form').serialize(),
   			dataType:'json'
   		});

      // 로딩바를 보여 준다.
    	$('#loadimg').css('display','block');
      
      $.when(when)
    	.done(function(data)
    	{
    		var message = data.message;
    		if ( message == 'Success' )
    		{
    			//console.log('success');
          // 성공일 때 form submit을 합니다.
    			event.currentTarget.submit();
    		}
    		else
    		{
    			// 안내 메시지를 보여준다.
    			alert('안내 메시지');
    			// 에러가 발생하면 모달창을 닫는다.
    			$('#모달창 id').modal('hide');
    		}
    	})
    	.fail(function(request, status, error)
    	{
        // 통신 실패하였을 때
    		console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
    
    		// 안내 메시지를 보여준다.
    		alert('안내 메시지');
    		// 에러가 발생하면 모달창을 닫는다.
    		$('#모달창 id').modal('hide');
    	})
    	.always(function (data, status, responseObj)
    	{
        // 성공 실패와 상관 없이 항상 처리를 하는 내용을 담습니다.
    		//console.log(data);
    
    		// 로딩바를 해제한다.
    		$('#loadimg').css('display','none');
    	});
    
    })
  </script>
  
</body>
</html>

2020/03/05 - [유용한 활용팁] - Javascript ajax async: false (동기식) 처리 시 로딩바 구현 방법.

2020/03/04 - [유용한 활용팁] - Javascript jquery submit 이벤트 시 submit 제어하기

2020/03/03 - [유용한 활용팁] - Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false

ajax를 동기식( async: false )으로 구현할 경우 beforeSend:function()의 로딩바가 구현이 되지 않습니다.

통신의 결과가 나오지 않아서 아래까지 내려가지 않는 현상으로 보입니다.

시간이 지연되는 서비스의 경우 로딩바 없이 현재 화면을 보고 있어야 하는 현상이 생깁니다.

ajax async: false (동기식) 처리 시 로딩바 구현 방법입니다.

1. ajax 호출 전 로딩바를 먼저 호출합니다.
2. setTimeout을 호출 후 ajax 로 진입하게 합니다.
3. ajax를 async: false로 비동기식 통신을 합니다.
4. 통신이 끝나면 complete:function()로 로딩바를 해제합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <form name="theForm" action="" method="post" id="theForm">
    <input type="submit" />
  </form>

<script>
  $('#theForm').submit(function(event){
  
	// 자동 submit을 시키는 것을 막는다.
	event.preventDefault();

    /**
     * 입력 필드 validattion check 로직
     */
  

    /**
     * ajax로 다른 페이지를 처리 후에 결과가 성공일 때 전송 처리를 한다.
     */

     // 로딩바를 보여 준다.
   	$('#loadimg').css('display','block');
   
   	setTimeout(function() {

    	$.ajax({
    		url:'[주소]',
    		type:'post',
    		data:$('form').serialize(),
    		dataType:'json',

    		// 다른 페이지를 처리 후에 결과가 성공일 때
    		// 비동기식으로 처리를 함
    		async: false,
    		success:function(data)
    		{
          var message = data.message;
    
          // 결과값이 성공이면 전송 여부는 true
          if ( message == 'Success' ) {
    			}
    			else {
    			}
    		},
    		error:function(request, status, error)
    		{ // 오류가 발생했을 때 호출된다.
    			console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
    		},
    		complete:function()
    		{
    			// 로딩바를 해제한다.
          $('#loadimg').css('display','none');
    		}
    	});
    }) // End $.ajax(
  }, 0); // End setTimeout(function()
</script>
  
</body>
</html>

2020/03/04 - [유용한 활용팁] - Javascript jquery submit 이벤트 시 submit 제어하기

2020/03/03 - [유용한 활용팁] - Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false

Form에서 onsubmit 이벤트를 사용할 때 Javascript로 ajax 결과에 따라서 전송 처리하는 방법입니다.

1. ajax 설정 값 중  async를 false로 설정합니다.

- async: false 는 동기식 즉 절차적으로 처리를 한다는 의미입니다.
- async: false 를 하지 않으면 전송 결과에 상관없이 submit이 되어 버립니다.

2. ajax 처리 결과에서는 전송 여부 설정을 하고 이 값을 이용하여 return false 처리를 합니다.

- 전송 결과에서 return false 처리를 하여도 전송 처리가 됩니다.

<<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <form name="theForm" method="post" onsubmit="return thisFormSubmit(this);">
    <input type="submit" />
  </form>

<script>
  function thisFormSubmit(f) {
  
    /**
     * 입력 필드 validattion check 로직
     */
  

    /**
     * ajax로 다른 페이지를 처리 후에 결과가 성공일 때 전송 처리를 한다.
     */

    // 전송 여부 boolean 값
    // 초기값은 false로 셋팅을 한다.
  	var isSubmit = false;

  	$.ajax({
  		url:'[주소]',
  		type:'post',
  		data:$('form').serialize(),
  		dataType:'json',

  		// 다른 페이지를 처리 후에 결과가 성공일 때
  		// 비동기식으로 처리를 함
  		async: false,
  		success:function(data)
  		{
        var message = data.message;
  
        // 결과값이 성공이면 전송 여부는 true
        if ( message == 'Success' )
  			{
  				isSubmit = true;
  			}
  			else
  			{
  				// 결과값이 실패이면 전송 여부는 false
          // 앞서 초기값을 false로 해 놓았지만 한번 더 선언을 한다.
  				isSubmit = false;
  			}
  		},
  		error:function(request, status, error)
  		{ // 오류가 발생했을 때 호출된다.
  			console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
            // ajax 처리가 결과가 에러이면 전송 여부는 false
            // 앞서 초기값을 false로 해 놓았지만 한번 더 선언을 한다.
  			isSubmit = false;
  		},
  		beforeSend:function()
  		{
  			// 로딩바를 보여준다.
  		},
  		complete:function()
  		{
  			// 로딩바를 해제한다.
  		}
  	});
  
  	if ( !isSubmit ) return false;
  }
  </script>
  
</body>
</html>

프로그램에서 특정 입력 필드에서 타이핑을 치기 시작할 때 한번만 ajax 호출하는 방법입니다.

$("#userName").one("keyup", function(e) { 보시는 것처럼 one을 넣어서 keyup 이벤트를 인식하게 되면 

그 다음에는 인식을 하지 않도록 하게 합니다.

아래 보시는 소스는 이름 입력 필드에 사용자가 키보드를 눌렀을 때

ajax를 이용하여 비동기식으로 관련된 백그라운드 프로그램을 가동 시키게 하고

가동 완료 후 세션 아이디값을 받아와서 Form hidden으로 추가를 하여 정상 가동을 체크하도록 만든 것입니다.

백그라운드 프로그램을 가동하는 동안 사용자는 다른 필드에서 입력값을 넣게 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<form action="">
  <input type="text" name="userName" id="userName" />
  <input type="submit" />
</form>

<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<script>
  // 이름 입력 Field에 입력 시작 시 서비스 시작 호출
  // 성공한 데이터는 input 값에 셋팅을 함
  $("#userName").one("keyup", function(e) {

    // 서비스 시작 호출
    $.ajax({
      url:'서비스 시작 결과 데이터를 가져올 주소',
      dataType:'json',
      success:function(data)
      {
        var message = data.message;
        if ( message == 'Success' )
        {
          $("input[name='session_id']").remove();
          $("<input></input>").attr({type:"hidden", name:"session_id", value:data.session_id}).appendTo($('form'));
        }
        else {
          //console.log(message);
        }
      }
    })

  });
</script>
</body>
</html>

2020/01/13 - [유용한 활용팁] - Javascript ajax setTimeout를 이용하여 3분 간격 세션 자동 연장 처리

2020/01/10 - [유용한 활용팁] - Javascript Jquery 브라우저 종료시 로그아웃 처리하기 - beforeunload

2019/12/24 - [유용한 활용팁] - JavaScript 원하는 영역에 대해서만 출력 화면 설정하기 - window.print()

2019/12/21 - [유용한 활용팁] - JavaScript ajax jquery $.post를 이용하여 form 데이터 구성 없이 post로 데이터 전송 처리

2019/11/23 - [유용한 활용팁] - IE11에서 Jquery로 background-image 바뀌게(토글, toggle) 에러 처리 방법 - addClass, removeClass, hasClass, toggleClass

2019/11/15 - [유용한 활용팁] - JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number)

2019/11/07 - [유용한 활용팁] - JavaScript(자바스크립트), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법 - replace 활용

2019/10/29 - [유용한 활용팁] - JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산

2019/10/23 - [유용한 활용팁] - JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate

특정 시간 간격으로 생성 되어 있는 세션을 유지하는 방법입니다.

브라우저에서 자바스크립트의 setTimeout을 이용하여 타이머 셋팅을 한 후
원하는 시간이 되면 타이머를 초기화 하고 ajax로 세션 유지 처리를 하는 프로그램를 호출하면 됩니다.

var timeoutHnd = null;
var logouTimeInterval = 3 * 60 * 1000; // 3 mins here u can increase session time

function OnTimeoutReached() {
	$.ajax({
		url:'세션 유지를 위한 처리 주소'
	});

	ResetLogOutTimer();
}

function ResetLogOutTimer() {
	clearTimeout(timeoutHnd);
	// set new timer
	timeoutHnd = setTimeout('OnTimeoutReached();', logouTimeInterval);
}

timeoutHnd = setTimeout('OnTimeoutReached();', logouTimeInterval);

2020/01/10 - [유용한 활용팁] - Javascript Jquery 브라우저 종료시 로그아웃 처리하기 - beforeunload

2019/12/24 - [유용한 활용팁] - JavaScript 원하는 영역에 대해서만 출력 화면 설정하기 - window.print()

2019/12/21 - [유용한 활용팁] - JavaScript ajax jquery $.post를 이용하여 form 데이터 구성 없이 post로 데이터 전송 처리

2019/11/23 - [유용한 활용팁] - IE11에서 Jquery로 background-image 바뀌게(토글, toggle) 에러 처리 방법 - addClass, removeClass, hasClass, toggleClass

2019/11/15 - [유용한 활용팁] - JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number)

2019/11/07 - [유용한 활용팁] - JavaScript(자바스크립트), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법 - replace 활용

2019/10/29 - [유용한 활용팁] - JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산

2019/10/23 - [유용한 활용팁] - JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate

form, input 태그 사용 없이 ajax 통신 시 jquery의 $.post를 이용하여 post 방식으로 데이터 전송 방법입니다.

아래는 일반적으로 사용하는 방식입니다.

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: data
});

$.post 함수를 사용하는 방법입니다.

name, value 한 쌍씩 만들어서 해서 보내 주면 처리가 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <a href="#" onclick="return sendReqData('1');">가입하기</a>
  <script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
  <script>
    function sendReqData(req_seq)
    {
    	$.post("./req.php", {seq:req_seq, code:'send'}, function(data)	{
    		console.log(data);
        // seq : 1 code : send
    	});
    }
  </script>
</body>
</html>

<?php
  /**
   * req.php
   */

  $seq  = $_POST['seq'];
  $code = $_POST['code'];
  echo 'seq : '. $seq . ' code : '. $code;
?>

2019/11/23 - [유용한 활용팁] - IE11에서 Jquery로 background-image 바뀌게(토글, toggle) 에러 처리 방법 - addClass, removeClass, hasClass, toggleClass

2019/11/15 - [유용한 활용팁] - JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number)

2019/10/29 - [유용한 활용팁] - JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산

2019/10/23 - [유용한 활용팁] - JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate