Java Spring Ajax 문법으로 DB 데이터 가져와서 화면에 보여주는 방법

https://genesis8.tistory.com/214

DAO / VO / DTO란?

DAO =DTO ? 

<select id="mailDAO.selectCompanyGroupUserList" parameterClass="java.util.HashMap" resultClass="egovMap">
 		/* 메일 주소록 조회  : mailDAO.selectCompanyGroupUserList */
		SELECT
		           AA.USER_NM
		         , AA.EMAIL
		         , ISNULL(AA.GROUP_NM, '-') AS GROUP_NM
		         , AA.MAIL_GRP_IDX
		         , AA.GRP_USER_COMP
		 FROM(
				대충 쿼리 문 !!
 	</select>

Service

public List<?> selectCompanyGroupUserList(HashMap<String, Object> paramMap) throws Exception;

DAO

public List<?> selectCompanyGroupUserList(HashMap<String, Object> paramMap) {
		return list("mailDAO.selectCompanyGroupUserList", paramMap);
	}

 

Controller

@RequestMapping(value = "ntb/mail/GetallCompanyaddrList.json")
	@ResponseBody
	public List<?> GetallCompanyaddrList(ModelMap model, HttpServletRequest request, HttpSession httpSession,@ModelAttribute("MailVO") MailVO vo)
			throws Exception {

		HashMap<String, Object> paramMap = new HashMap<String, Object>();

		//세션정보 호출
		SessionVO userSession = (SessionVO) request.getSession().getAttribute("SessionVO");
		String mailAddr = userSession.getEmail();

		vo.setMailAddr(mailAddr);
		List<?> addrGroupList = mailService.selectMailAddrGroupList(vo);

		String schEmail  = request.getParameter("schEmail");
		String schGrpIdx  = request.getParameter("schGrpIdx");
		String toFlg  = request.getParameter("toFlg");
		
		paramMap.put("mailAddr", mailAddr);
		paramMap.put("schEmail", schEmail);
		paramMap.put("schGrpIdx", schGrpIdx);

		// 이메일 리스트 조회
		List<?> resultList = mailService.selectCompanyGroupUserList(paramMap);
		System.out.println("이건 GET 방식으로 받을 ajax data :  " + resultList);
	
	

		return resultList;
	}

		<div><input type="button" id="btn3" class="btn btn-default" value="클릭" /></div>

 

$('#btn3').click(function() {
			alert("테스트 클릭성공");
			
			gubnData = 'T';
			
			$.ajax({
		        type: 'GET',
		        url: "/ntb/mail/GetallCompanyaddrList.json",
		        dataType: "json",
		        success: function(data) {
		        	
		        	 $(data).each(function(index, item) {
		        		 	makeMailHTML(item.email, 'T', item.userNm);
		      	    		$("#toTextarea").val('');
		             });

		        }
		});
			
			alert("테스트 ajax 성공");
		});

반응형

function makeMailHTML(val, gubun, user) {
		var textAreaVal  = "";
		var textAreaView = "";
		
		if(user == '' || typeof user == "undefined" ){
			user = '';
		}else{
			user = user.replace(/ /g," ").replace(/"/g,"");
		}
		
		if(gubun == "T") {
			if(val == "") {
				textAreaVal = $('#toTextarea').val();
				textAreaView = textAreaVal;
			} else {
				textAreaVal = val;
				textAreaView = " <" + textAreaVal + ">";
			}
			
			if(!cf_chkTxtEmailFormat(textAreaVal)) {
				alert("이메일 형식이 맞지 않습니다.");
				$('#toTextarea').focus(); 
				
				return; 
			}  
			//받아온 데이터 값들이 여기에서 형식에 맞게 올라오네
			$('#toTextarea').before('<div style="display: inline-block; overflow: hidden; position: relative; max-width: 390px; height: 21px; border: 1px solid #7bb2f5; vertical-align: top; margin-right: 2px;">' +
						'<em style="display: block; text-overflow: ellipsis; white-space: nowrap; line-height: 18px; overflow: hidden; float: left; margin-top: 2px;"></em>' +
						'<button type="button" style="position: relative; top: 0; right: 0; height: 20px; margin-left: 5px; margin-top: 1.5px;">' +
						'<img style="padding-right: 5px;" alt="삭제" src="/images/com/mailDelete.png">' +
						'</button>' +
						'<input name="setMailAddrUser" type="hidden" value=""/>' +
						'<input name="setMailAddr" type="hidden" value=""/>' +
						'</div>'
			);
			
			$('.tableType1 tr td:eq(0) em:last()').text(user + textAreaView);
			$('.tableType1 tr td:eq(0) div input[type=hidden]:last()').val(textAreaVal);
			$('.tableType1 tr td:eq(0) div:last() input[type=hidden]:nth-last-child(2)').val(user+"/"+textAreaVal);
		} else {
			if(val == "") {
				textAreaVal = $('#ccTextarea').val();
				textAreaView = textAreaVal;
			} else {
				textAreaVal = val;
				textAreaView = " <" + textAreaVal + ">";
			}
			 
			if(!cf_chkTxtEmailFormat(textAreaVal)) {
				alert("이메일 형식이 맞지 않습니다.");
				$('#ccTextarea').focus();
				
				return;
			} 
			
			$('#ccTextarea').before('<div style="display: inline-block; overflow: hidden; position: relative; max-width: 390px; height: 21px; border: 1px solid #7bb2f5; vertical-align: top; margin-right: 2px;">' +
						'<em style="display: block; text-overflow: ellipsis; white-space: nowrap; line-height: 18px; overflow: hidden; float: left; margin-top: 2px;"></em>' +
						'<button type="button" style="position: relative; top: 0; right: 0; height: 20px; margin-left: 5px; margin-top: 1.5px;">' +
						'<img style="padding-right: 5px;" alt="삭제" src="/images/com/mailDelete.png">' +
						'</button>' +
						'<input name="setMailCcUser" type="hidden" value=""/>' +
						'<input name="setMailCc" type="hidden" value=""/>' +
						'</div>');
			
			$('.tableType1 tr td:eq(1) em:last()').text(user + textAreaView);
			$('.tableType1 tr td:eq(1) div input[type=hidden]:last()').val(textAreaVal);
			$('.tableType1 tr td:eq(1) div:last() input[type=hidden]:nth-last-child(2)').val(user+"/"+textAreaVal);
		}
		
	}

 

 

 

 

 

jQuery UI autocomplete(입력필드 자동완성) 사용하기

https://kyhyuk.tistory.com/152

Spring 개발자 수업 105일차(1) - jQuery Ajax를 이용한 데이터 가져오기/보내기