#8-3 / ☔ - 통계차트 출력 페이지(list) , ajax(SPA)+do

강우량 통계차트 출력페이지 (SPA) - ajax (jQuery) 로 핸들링 할거임

모든데이터의 날짜값을 가져와서 jsp의 select에 뿌려줌

(최초 접속시 오늘 날짜를 back-end로 전송

backend에서 해당 날짜를 이용해 데이터 추출 -> front로 session storage 세팅 )=> select 가 바뀔때마다 해당 함수 작동

/*--------------------- 일자별 리스트 값을 가져오는 part (select 에 날짜 뿌려주는 용도)-----------------------*/

10. mapper.xml 해당 쿼리문 추가 - 모든 데이터의 날짜값만 가져오기

<select id="rain_alldata_select" resultType="rainfalldao"> 
	select today from rainfall order by ridx desc;
</select>

11.Controller

//아래 통합버전 확인 넘 헷갈림

List<rainfall_dao> all = rm.ymdlist();
m.addAttribute("all",all);
/..

12.Module 일자별 리스트 값을 가져오는 메소드

public List<rainfall_dao> ymdlist(){
    List<rainfall_dao> all = new ArrayList<rainfall_dao>();
    all = tm.selectList("datadb.rain_alldata_select");

    return all;
}

↓ 요렇게 jsp에 반복문으로 찍어주면됨

일자별 강우량 :
<select style="width : 150px;" id="select_day">
    <cr:forEach var="ymd" items="${all}">
        <option>${ymd.today}</option>
    </cr:forEach>
</select>

/*--------------------- select option 선택시 해당 날짜 차트만 출력 : ajax -----------------------*/

backend 에서 sessionStorage 만들어서 printwriter로 찍어주면

front ajax에서 eval() 로 그대로 가져오기

( *주의 printwriter close if문 밖에다 쓰면 do파일 백지화면 뜸 - jquery 버그 )

13. mapper.xml - select query문 추가

<select id="rain_select_ajax" resultType="rainfalldao"> 
	select * from rainfall where today=#{today}
</select>
<!-- resultType : config.xml의 alias 값 -->

14. Controller - ajax part (ajax로 값을 전달받음) : 선택일자의 data 가져오기

//아래 통합버전 확인 넘 헷갈림

if(sdate != null) {
    dao2 = rm.ajax_today(sdate); //해당 일자의 data를 가져오는 형태
    this.pw.print(""
            + "sessionStorage.setItem('area1','"+ dao2.area_part1 +"');"
            + "sessionStorage.setItem('area2','"+ dao2.area_part2 +"');"
            + "sessionStorage.setItem('area3','"+ dao2.area_part3 +"');"
            + "sessionStorage.setItem('area4','"+ dao2.area_part4 +"');"
            + "sessionStorage.setItem('area5','"+ dao2.area_part5 +"');"
            + "");
    System.out.println(sdate);
    this.pw.close();
}

15. Module - selectOne ( Controller로 값 던짐 )

public rainfall_dao ajax_today(String today) {
    rainfall_dao dao = tm.selectOne("datadb.rain_select_ajax",today);

    return dao;
}

❗ ❗ ❗ 알아두셈 - do와 ajax 동시에 사용(Model 사용)시 ❗ ❗ ❗

@GetMapping("/rainfall/rainfall_list.do")
public String rainfall_list(String sdate) throws Exception{
	this.pw.print(sdate);
    
    return "/rainfall/rainfall_list";
}
// 요런 경우

//ajax로 print로 찍은거 받아오면
success:function($data){
    console.log("${data}")	
},

=> doctype부터 ~~~ 왕창찍힘

🔽 🔽 🔽 🔽 Controller에서 주는 데이터 바로 받는 형태

@Controller
m.addAttribute("message","우왕"); //Model로 보내주고

ajax 에서
success:function($data){
    console.log("${message}") //jstl 변수로 받으면 됨
},

=> 요런 방식으로 받아야 console에 보내온 값만 딱 찍힌다!

setAttribute로 보내고 받아도 됨

backend에서 printwriter로 session storage 찍어줘도됨(-> front에서 eval()로 바로 script 때려버림) - 위 예제에서 이러케함

/*--------------------- 결과 jsp , controller 최종.. -----------------------*/

16. rainfall_list.jsp : select=>option 선택시 ajax 로 값을 전송

<body>
    <p>
        일자별 강우량 :
        <select style="width : 150px;" id="select_day">
            <cr:forEach var="ymd" items="${all}">
                <option>${ymd.today}</option>
            </cr:forEach>
        </select> 
    </p>
    <div class="gp">
        <ul>
            <li>서울</li>
            <li>경기도</li>
            <li>세종</li>
            <li>대전</li>
            <li>강원도</li>
        </ul>
        <ul>
        <li id="box0"></li>
        <li id="box1"></li>
        <li id="box2"></li>
        <li id="box3"></li>
        <li id="box4"></li>
        </ul>
    </div>
    <br><br><br>
    <input type="button" value="강우량 등록">
    <input type="button" value="강우량 수정">
    <input type="button" value="강우량 삭제">
</body>

<script>
    $(document).ready(function(){
    	$.fn.dataload = function(ymd){ //확장함수	
    		$.ajax({
    			//현재 url에 파라미터가 붙진 않음 걍 ajax 전송하는 url
    			url :'./rainfall_list.do?sdate='+ymd,
    			cache : false,
    			dataType : "html",
    			thpe : "get",
    			success : function($result){
    				eval($result); //sessionstorage 세팅됨 (backend에서 print로 찍어줌)
    				var $a1 = sessionStorage.getItem("area1"); //storage에 저장된 값을 가져옴
    				var $a2 = sessionStorage.getItem("area2");
    				var $a3 = sessionStorage.getItem("area3");
    				var $a4 = sessionStorage.getItem("area4");
    				var $a5 = sessionStorage.getItem("area5");
    				
    				//animation 확장함수에 sessionstorage에 담긴 값 인자값으로 전달
    				$.fn.gp($a1,$a2,$a3,$a4,$a5); 
    			},
    			error : function(){
    				console.log("data error")
    			}
    				
    		});
    	}
    	
    	//backend가 생성한 storage 값을 이용하여 그래프로 출력하는 확장함수
    	$.fn.gp = function($area1,$area2,$area3,$area4,$area5){ 
	      	var $w = 0;
	        var $time = 3000;    //시간
	        var $width = $area1+"|"+$area2 + "|" + $area3 + "|" + $area4 + "|" +$area5;
	        var $ani_width = $width.split("|");
	                              
	        while($w<5){
	             var $ids = "#box" + $w; 
	             var $ani_time = $time * $w; 
	             $($ids).css({
	            	 "transition" : "2s",
	            	 "width":$ani_width[$w]
	             })        
	             $w++;
	        }
    	}
    	
    	//오늘날짜 알아오는 스크립트
    	let $jdate = new Date(); 
    	let $toString = $jdate.toISOString().substring(0,10);
    	
    	
    	//최초 접속시 오늘 날짜로 띄움
    	if($toString != $("#select_day").val()){ //오늘날짜 데이터가 없다면?
		//확장함수 호출(초기인자값 : select의 맨 마지막날짜값)
	    	$.fn.dataload($("#select_day").val()); 
    	}else{
    		$.fn.dataload($toString); //확장함수 호출(초기인자값 : 오늘날짜)
    	}
    	
    	//select 바꿀때마다 인자값 바꿔서 전달
    	$("#select_day").change(function(){ 
    		$.fn.dataload($(this).val());
    	})
    });
</script>

Contoller 최종

@GetMapping("/rainfall/rainfall_list.do")
public String rainfall_list(String sdate,HttpServletResponse res,Model m) throws Exception{
    this.pw = res.getWriter(); 

	//모든 데이터의 날짜 추출해서 front로 보내주는 파트
    List<rainfall_dao> all = rm.ymdlist(); //select option 반복 때리려고 모든 날짜 data 뽑아서 보내줌 
    m.addAttribute("all",all);

	//날짜별 지역별 강우량을 session storate로 세팅해주는 파트
    rainfall_dao dao2 = null;
    //do가 먼저 실행,ajax가 후발로 실행되기 때문에 최초 접속시 null 찍히는 현상 조건문으로 처리
    if(sdate != null) {
        dao2 = rm.ajax_today(sdate); //해당 일자의 data를 가져오는 형태
        this.pw.print(""
                + "sessionStorage.setItem('area1','"+ dao2.area_part1 +"');"
                + "sessionStorage.setItem('area2','"+ dao2.area_part2 +"');"
                + "sessionStorage.setItem('area3','"+ dao2.area_part3 +"');"
                + "sessionStorage.setItem('area4','"+ dao2.area_part4 +"');"
                + "sessionStorage.setItem('area5','"+ dao2.area_part5 +"');"
                + "");
        this.pw.close();
    }

    return "/rainfall/rainfall_list";
}

Module 최종 (Controller에게 값 전달)

package api;

//~import

@Repository("rainfalls")
public class rainfall_module {
	@Resource(name="template")
	private SqlSessionTemplate tm;

	public List<rainfall_dao> ymdlist(){
		List<rainfall_dao> all = new ArrayList<rainfall_dao>();
		all = tm.selectList("datadb.rain_alldata_select");
		
		return all;
	}
	
	public rainfall_dao ajax_today(String today) {
		rainfall_dao dao = tm.selectOne("datadb.rain_select_ajax",today);
		
		return dao;
	}
}

mapper는 위에서 확인 ^^,,

'CLASS > SPRING,JSTL' 카테고리의 다른 글

별도의 config, mapper를 사용하는 방식 (1)	2024.07.24
#9-1 / ☔ - 통계차트 수정,삭제 페이지 (0)	2024.07.24
#8-2 /☔ 통계 data 관련 project 만들기 - selectOne(ajax),insert (0)	2024.07.23
#8-1 / point table => Module (4)	2024.07.23
#7-3 / mybatis DB연결 - 포인트 (insert, select ,select one,delete) (1)	2024.07.22

hing ㅠ

#8-3 / ☔ - 통계차트 출력 페이지(list) , ajax(SPA)+do

'CLASS > SPRING,JSTL' 카테고리의 다른 글

티스토리툴바

#8-3 / ☔ - 통계차트 출력 페이지(list) , ajax(SPA)+do

'CLASS > SPRING,JSTL' 카테고리의 다른 글

관련글

티스토리툴바