[Ajax] Ajax 사용하여 목록 테이블의 특정 데이터만 변경하기

구현하려는 기능은 다음과 같다.

 

(1) 목록에는, 이전에 사용자가 등록한 주소를 보여준다.

(2) 만약 현재 살고 있는 주소와 다르다면,

현주소 일치여부의 라디오버튼 '불일치'를 클릭 후, 주소 입력 팝업창에서 현재 살고 있는 주소를 입력한다.

(3) 주소를 저장하면 페이지 새로고침이 없이(Ajax로 구현하기 때문에) 현주소로 변경된다. (표 1-1에서 1-2로 변경)

 

BEFORE)

 

표 1-1

 

주소 입력 팝업창)

 

주소를 새로 입력하는 팝업창

 

 

 

AFTER)

 

표 1-2

 

 

 

------------------------------------------------------------------------

>> 기능구현 시작

 

 

1. List.jsp에서 우선 일치와 불일치를 체크할 수 있는 라디오 버튼을 만들어준다.

그리고 불일치 클릭 시 주소를 수정할 수 있는 팝업을 띄운다.

 

// 주소일치여부 확인팝업
<script>
function showAddrPopup(index) {
    var url = "/user/chckAddrPopup.ws";
    var option = "top=250, left=1100, width=500, height=1000, toolbar=no, menubar=no, scrolbar=no, status=yes, resizable=no";
    //팝업 옵션을 알아서 설정하기
   
    window.open(url, "현 주소와 일치여부 확인", option);
    
    showIndex = index; //특정 행의 주소를 바꾸는 것이므로 index가 필요함(나중에 설명) 
    
    $(function() {
        $(".layer").fadeIn(); //팝업창 css도 알아서 설정
    });
}
</script>

// 라디오버튼 
// <c:forEach> 태그를 쓰는 이유는 java단에서 List로 받아오기 때문이고, 따라서 name에다가 index를 붙여줘야 함 
<c:forEach var="item" items="${cer_list}" varStatus="vs"> 
...
<td>
<input type="radio" name="chck_addr_${vs.index}" value="0" > 일치
<input type="radio" name="chck_addr_${vs.index}" value="1" onclick="showAddrPopup(${vs.index})"> 불일치
</td>
...
</c:forEach>

 

 

2. Popup.jsp에서 주소 팝업창 만들기(다음 우편번호 검색 이용)

// 주소 입력란 만들기(다음 우편번호 검색)		
<table>
<tbody>
<tr>
<td style="text-align: left;padding: 10px;">
<input type="text" id="CORP_ZIP_CODE" name="post" style="max-width: 80px;padding:0;width:100%;" value="" readonly />
<input type="button" class="btn_m" value="우편번호 찾기" onclick="openDaumPostCode('CORP_ZIP_CODE','CORP_ADDR1','CORP_ADDR2','CORP_ADDR3','CORP_ADDR4');"/>
<input type="hidden" id="CORP_ADDR1" />
<input type="hidden" id="CORP_ADDR2" />
<input type="text" id="CORP_ADDR3" name="addr"  style="max-width: 392px;padding:0;width:100%;" value="" readonly /> 
<input type="text" name="addr1"  style="max-width: 392px;width:100%;padding:0;" value="" placeholder="상세 주소를 입력하세요." />
</td>
</tr>
</tbody>
</table>

<div>
<button type="button" value="닫기" class="btn_sap" id="btn_close">닫기</button>
<button type="button" value="저장" class="btn_sap1" id="btn_select" >저장</button>
</div>


// 다음우편번호 레이어팝업 삽입코드
<div id="postcode-daumapi-wrap" style="display:none;position:fixed; height:605px; -webkit-overflow-scrolling:touch; width:464px;  border:1px solid #000; background:#fff; box-sizing:border-box; padding:0 26px; left:50%; top:50%; z-index:9000; margin:-310px 0 0 -232px;">
<img src="/resources/img_old/close_zip.gif" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:25px;top:25px; z-index:1000" onclick="closeDaumPostcode();" alt="닫기 버튼">
<p style="padding:25px 0 20px 0; width:402px; margin:0 auto; border-bottom:2px solid #000; text-align:center;">
<img src="/resources/img_old/txt_zip.gif" alt="" />
</p>
<div id="postcode-daumapi" style="width:402px; height:475px; margin:20px auto 0 auto; border:1px solid #aaa;"></div>
</div>

 

 

3. Popup.jsp에서 저장 버튼 클릭 시 ajax 이용

<script>
$(function(){
	 
	 //주소 저장 시 실행되는 함수
	 $("#btn_select").click(function(){
		 	
            //주소 입력 유효성 검사
	 		if ( $("input[name=addr]").val().length == 0 ) {
				alert("주소를 입력해주세요.");
				return false;
			} 
			
            //상세주소 입력 유효성 검사
			if ( $("input[name=addr1]").val().length == 0) {
				alert("상세 주소를 입력해주세요.");
				return false;
			} 
			
            // 입력값 변수 가져오기
			var addr = $('input[name="addr"]').val();
			var addr1 = $('input[name="addr1"]').val(); 
			
            
            // Ajax 작성하기
			$.ajax({
	        type: "POST",
	        url: "getNewAddr.ws",
	        data: {
	        	"addr" : addr, "addr1" : addr1
	    	},
	    	dataType: "json",
	    	success: function(data) {
	            alert("주소를 저장하였습니다.");
	            opener.updateAddress(data.addr, data.addr1, opener.showIndex);
                // 1번에서 언급한 showIndex값을 여기서 사용
                // opener함수는 부모창(List.jsp)에서 실행하기 위함
                self.close();
	        },
	    	error: function(request, status, error){
	    		console.log(request, status, error); // 에러발생 시 개발자도구에서 로그보기 위함
	    		alert("주소 저장에 실패하였습니다.");
	    		self.close(); 
	    	}
			}); 
		
	
	});
	 
	//닫기 버튼 클릭시
	$("#btn_close").click(function(){
		self.close();
     	$(opener.document).find(".layer").hide();
	});
    
  });
</script>

 

 

4. List.jsp에서 updateAddress 함수 넣어주면 끝(1번의 script 태그에 추가)

<script>
//변경된 주소 표시 및 저장
function updateAddress(addr, addr1, index) {

    var newAddr = document.querySelector('#new_addr_' + index);
    newAddr.style.display = 'block';
    newAddr.innerHTML = addr + " " + addr1; // 새 주소는 보여주고,

    var oldAddr = document.querySelector('#old_addr_' + index);
    if (oldAddr) {
        oldAddr.style.display = 'none';
    } // 기존 주소는 가리기

}; 
</script>


//결과를 보여줄 p 태그 작성
<td>
	<p id="new_addr_${vs.index}"></p>
	<p id="old_addr_${vs.index}"><c:out value="${item.old_addr}"/></p>
</td>

 

출처: https://yongjalife.tistory.com/entry/JQuery-Ajax-Ajax-사용하여-목록-테이블의-특정-데이터만-변경하기 [WORK LIFE BLOG:티스토리]