스프링으로 웹페이지 만들기 - 4. 데이터 주고 받기

 

 

내 블로그 ORACLE 카테고리에 로또 번호 추출 쿼리를 포스팅하였다.

그 쿼리를 기반으로 프로젝트에 사용하도록 해보겠다.

 

https://biesil.tistory.com/entry/ORACLE-%EB%A1%9C%EB%98%90-%EB%B2%88%ED%98%B8-%EC%B6%94%EC%B6%9C%ED%95%98%EA%B8%B0-%EB%A1%9C%EB%98%90-SQL?category=705523

ORACLE 로또 번호 추출하기 - 로또 SQL

 

 

위 본문을 통해 쿼리를 구상하였다면 이제 저번 DB연동 포스팅과 똑같이

controller -> service -> serviceImpl -> dao -> daoImpl -> xml 순으로 구성해준다.

 

BoardController 내부로직

@ResponseBody 로 해당 메서드 위에 선언해주고

jsp 에서 던져주는 boardVO 내의 number가 잘 들어 오는지 확인하기 위해 로그를 찍어본다.

 

board.jsp 의 구매횟수 라인

 

 

메인화면

여기서 선택한 값을 컨트롤러로 보내준다.

 

$('#getNumber').on("click", function() { 
	rootUrl = "http://localhost:8080/"
	
	$.ajax({
		type: "POST",
		url: rootUrl + "getBoard",
		data: {buyLine : $('#buyLine').val()},
		success: function(res) {
			var str = "";
			
			for (var i = 0; i < $('#buyLine').val(); i++) {
				str += res.lists[i].NO1+" "+res.lists[i].NO2+" "+res.lists[i].NO3+" "+res.lists[i].NO4+" "+res.lists[i].NO5+" "+res.lists[i].NO6+ "\n" 
			}  
				
			alert(str);
		}, 
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			alert("통신실패!");
		}
	});
})

 

ajax 에 type, url, data 를 설정하고

성공 및 실패시 일어날 이벤트도 설정해준다.

 

통신 성공시 쿼리에서 추출한 번호를 alert 창에다가 뿌려줄 예정이고,

실패시 실패되었다고 alert창을 띄우겠다.

 

BoardService

 

BoardServiceImpl

 

 

BoardDao

 

BoardDaoImpl

 

BoardMapper.xml

 

이렇게 다 설정 한 뒤 메인화면의 번호 뽑기 버튼을 누르면!!

 

번호 추출 성공

 

번호가 정상적으로 추출되었다!

 

 

 

 

번외로 여기까지 진행하면서 빼먹었던 부분들을 소소하게 정리하자면

 

- 문자열 줄바꿈

alert 창에 줄바꿈을 사용하기 위해 jstl 을 받아 썼다.

jstl 선언

Board.jsp 내에 선언하였다.

alert 창 내부에 \n 문자가 먹히도록 하기 위해서였다.

 

 

- json 데이터 사용을 위한 dependency 주입

json 데이터를 사용하기 위해 json, jackson 의존객체를 pom.xml 에 주입하였다.

 

<!-- https://mvnrepository.com/artifact/org.json/json -->
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20211205</version>
</dependency>

<!-- jackson -->
 <dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-mapper-asl</artifactId><version>1.4.2</version>
</dependency>

<!-- @Inject -->
<dependency>
    <groupId>javax.inject</groupId>
    <artifactId>javax.inject</artifactId>
    <version>1</version>
</dependency>

 

 

이제 손볼것이 너무 많아졌다!

다음 포스팅엔.. 아마.. UI 개선이 되지 싶다!

 

 

 

 

다음 포스팅은 JAVA단이 아닌 JSP,JS 카테고리 이므로 

https://biesil.tistory.com/9?category=908512

스프링으로 웹페이지 만들기 - 5. 부트스트랩 무료템플릿 사용하기

 

여기에 URL을 달아놓겠습니다!