23.05.17

이준영·2023년 5월 17일

jQuery Core

1. dom

2. event

3. ajax

4. animation

==> UI

		desktop			- jQuery UI
        		
        mobile			- jQuery Mobile
        	tablet
            smartphone

jQuery UI 준비

필요한 요소들 다운로드

프로젝트 하나 만들고 안에다가 붙여넣기

css 폴더에 theme들 복사, js에 라이브러리들 넣기

jsp파일 하나 만들고 불러오기

<link rel="stylesheet" href="./css/base/jquery-ui.css" />
<style type="text/css">

</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

UI 버튼

일반적인 버튼

<input type="button" value="버튼 1" /><br><br>
<input type="submit" value="버튼 2" /><br><br>
<button>버튼 3</button><br><br>

UI식 버튼

<script type="text/javascript">
	$(document).ready(function() {
		console.log('Hello jQuery UI');
		
		$('#btn1').button();
	});
</script>

<button id="btn1">버튼 4</button><br><br> <-- css가 강제로 들어가짐, 다른 것들도 jQuery 통해 적용 가능

UI버튼에 강제로 css를 넣은 모습

버튼 뿐 아니라 다른 것들도 버튼화가 가능

css에서 크기나 다른 디자인 만져줄 수 있음

<style type="text/css">
	body {font-size:80%;}   <--- 글자 크기 80%
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		console.log('Hello jQuery UI');
		
		$('#btn1').button();
		$('input[type="button"]').button();  <--input type 버튼 바꾸기
		$('a').button();  <-- a태그 버튼으로 변환하기
		$('#btn2').button();  <-- div 버튼으로 변환
	});
</script>
</head>
<body>
<input type="button" value="버튼 1" /><br><br>
<input type="submit" value="버튼 2" /><br><br>
<button>버튼 3</button><br><br>

<button id="btn1">버튼 4</button><br><br>

<a href="https://www.daum.net">다음 바로가기</a><br><br>

<div id="btn2">버튼 5</div><br><br>
</body>

버튼에 이벤트 주기

	$(document).ready(function() {
		$('#btn1').button().on('click', function() {  <-- 버튼화 시키고 바로 이벤트 주면 된다.
			alert('btn1 클릭');
		});
		
		$('#btn2').button().on('click', function() {
			alert('btn2 클릭');
		});
	});

--------------------------------------------------------------------------
    
<body>

<button id="btn1">버튼 1</button><br><br>
<div id="btn2">버튼 2</div><br><br>
</body>

버튼에 아이콘 달기

다운받아서 넣은 css파일에 내장되어 있어서 가져오면 된다.

$(document).ready(function() {
	$('#btn1').button({
		icon: 'ui-icon-gear',
        // 없음, top, bottom, end
		iconPosition: 'end'   <-- 끝에다가 붙는다.
});

//메서드 체이닝 -  . . . 계속 체인저럼 이어지는 모습
$('#btn2').button({
	icon: 'ui-icon-flag',
	showLabel: false   <-- 버튼에 글자 보이지 않음
}).on('click', function() {    <-- 바로 뒤에 on 이벤트 주기
	alert('btn2 클릭');
});

UI checkboxradio

checkbox


<script type="text/javascript">
	$(document).ready(function() {
		$('input[type="checkbox"]').checkboxradio();
	});
</script>

--------------------------------------------------------------------------
<body>
<fieldset>
	<legend>Hotel Ratings</legend>
<label for="cb1">2 Star</label><input type="checkbox" id="cb1">
<label for="cb2">3 Star</label><input type="checkbox" id="cb2">
<label for="cb3">4 Star</label><input type="checkbox" id="cb3">
<label for="cb4">5 Star</label><input type="checkbox" id="cb4">
</fieldset>
</body>

fieldset으로 border만들고 legend로 보더컨셉 만들기
checkboxradio통해 ui적 체크박스 만들기

radio

checkbox와 똑같이 만들면 단일 체크가 되지 않아서 꼭 name을 써줘야 함


<script type="text/javascript">
	$(document).ready(function() {
		$('input[type="radio"]').checkboxradio();
	});
</script>

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

<body>

//체크박스와 다르게 네임 추가

<fieldset>
	<legend>Hotel Ratings</legend>
<label for="r1">2 Star</label><input type="radio" name="r" id="r1">
<label for="r2">3 Star</label><input type="radio" name="r" id="r2">
<label for="r3">4 Star</label><input type="radio" name="r" id="r3">
<label for="r4">5 Star</label><input type="radio" name="r" id="r4">
</fieldset>
</body>

토글 버튼

$(document).ready(function() {
		//toggle button
		$('input[type="radio"]').checkboxradio({
			icon: false;   <-- 아이콘 안쓰겠다는 뜻
		});
	});

css 풀려있음

라디오 이벤트

	$(document).ready(function() {
		//toggle button
		$('input[type="radio"]').checkboxradio({
			icon: false
		}).on('click', function() {   <-- click 대신 change 줘도 된다.
			console.log('radio click');
		});
	});

UI progressbar : 진행바

기본 진행바

<link rel="stylesheet" href="./css/cupertino/jquery-ui.css" /> <-- 색이 잘 안보여서 cupertino로 css테마 변경함


<script type="text/javascript">
	$(document).ready(function() {
		$('#progressbar').progressbar({
			// %, 기본적으로 100 max 기준
			value: 10
		});
	});
</script>

--------------------------------------------------------------------------
<body>
<div id="progressbar"></div>
</body>

진행바의 값 출력

<script type="text/javascript">
	$(document).ready(function() {
		$('#progressbar').progressbar({
			// %, 기본적으로 100 max 기준
			value: 10
		});
		
		$('#btn1').button().on('click', function() {
		const value = $('#progressbar').progressbar('value');  <-- 밸류 통해서 값을 가져올 수 있도록 함
        
        1. 출력
		console.log(value);
		
        2. 값 변경( 후 버튼 클릭시 변경된 값으로 출력)
		$('#progressbar').progressbar('value', 70);  < -- 진행바 값 변경
		});
	});
</script>

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

<body>
<div id="progressbar"></div>
<br><hr><br>
<button id="btn1">값</button>
</body>

버튼 누르면 감소 / 증가 되는 bar

<script type="text/javascript">
	$(document).ready(function() {
		$('#progressbar').progressbar({
			// %, 기본적으로 100 max 기준
			value: 10
		});
		
		//값 감소
		$('#btn1').button().on('click', function() {
			const value = $('#progressbar').progressbar('value');

			$('#progressbar').progressbar('value', value - 10);

		});
		
		//값 증가
		$('#btn2').button().on('click', function() {
			const value = $('#progressbar').progressbar('value');

			$('#progressbar').progressbar('value', value + 10);
		});
	});
</script>

--------------------------------------------------------------------------
<body>
<div id="progressbar"></div>
<br><hr><br>
<button id="btn1">감소(-10)</button>
<button id="btn2">증가(+10)</button>
</body>

UI slider

progress와 다르게 min / max 주기 가능


$('#slider').slider({
			//orientation: 'vertical' // 수직 구조
			value: 50,
			min:0,
			max:200,
			//step: 20 //증가치가 20씩으로 바뀜
});

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

slider 값 출력

1. 버튼을 누를 시 값 출력하기

$('#slider').slider({
			//orientation: 'vertical' // 수직 구조
			value: 50,
			min:0,
			max:200,
			//step: 20 //증가치가 20씩으로 바뀜
		});

$('#btn').button().on('click', function() {
			console.log($('#slider').slider('value'));
})

2. 슬라이더 커서를 움직일시 값 출력

1.
		$('#slider').slider({
			//orientation: 'vertical' // 수직 구조
			value: 50,
			min:0,
			max:200,
			slide: function() {
				console.log('slide :', $(this).slider('value'));
			}
			//step: 20 //증가치가 20씩으로 바뀜
		});
        
2.
		$('#slider').slider({
			//orientation: 'vertical' // 수직 구조
			value: 50,
			min:0,
			max:200,
			slide: function(event, ui) {  <-- function에 event, ui줘서 값 출력하기
				//console.log('slide :', $(this).slider('value'));
				console.log('slide :', ui.value);
			}
			//step: 20 //증가치가 20씩으로 바뀜
		});

range slider

기본설정

$(document).ready(function() {
		$('#textarea').css('background-color', 'RGB(0,255,0)');
		
		
		$('#slider1').slider({
			range: true,
			min: 0,
			max :500,
			values:[75,300]
		});
		

	});

값출력


$('#slider1').slider({
			range: true,
			min: 0,
			max :500,
			values:[75,300],
			slide: function(event, ui) {
				//console.log(ui.values[0],'/', ui.values[1]);
				console.log($(this).slider('values',0), '/', $(this).slider('values',1))
			}
		});
	});

UI spiner

기본 형식


<script type="text/javascript">
	$(document).ready(function() {
		 $('#spinner').spinner({
         	 min: 5,
			 max: 250,
			 step: 10
         });
	});
</script>

--------------------------------------------------------------------------
<body>
<div>
	<label for="spinner" >데이터</label>
	<input type="text" id="spinner" value="5" readonly="readonly" /> <--value는 여기서 설정
</div>
<br><hr><br>

값 가져오기

	$(document).ready(function() {
		 $('#spinner').spinner({
			 min: 5,
			 max: 250,
			 step: 10,
             1.
			 spin: function() {
				 console.log($(this).spinner('value'));
			 }
		 });
		 
         2.
		 $('#btn1').button().on('click', function() {
			 console.log($('#spinner').spinner('value'));
		 })
	});

응용 : spinner로 구구단

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/cupertino/jquery-ui.css" />
<style type="text/css">
	body {font-size:80%;}
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		 $('#start').spinner({
			min: 1,
		 	max: 8,
			spin: function() {  <--- 시작 단 증가시 끝단도 자동 증가하게 하기 위함
				 $('#end').spinner('value', $(this).spinner('value') + 1);
			 }
		 });
		 
		$('#end').spinner({
			min:2,
			max:9,
			 spin: function() {
				 $('#end').spinner('value', $(this).spinner('value') - 1);
			 }
		 });

		let html = '';
		 $('#btn').button().on('click', function() {
			let cols =  $('#start').spinner('value');
			let rows =  $('#end').spinner('value');
			
			 html += '<table border="1" width="700">';
			 for(let i = cols; i <= rows; i++) {
				 html += '<tr>';
				 for(let j = 1; j <= 9; j++) {
					 html += '<td>' + i + " * " + j + "=" + (i * j)  + '</td>'
				 }
				 html += '</tr>';
				 }
			 html += '</table>';
			 
			 $('#result').html(html);
			 });
	});
</script>
</head>
<body>
<fieldset>
	<legend>구구단 출력</legend>
	<label for="start">시작단</label>
	<input type="text" id="start" value="1" readonly="readonly" />
	~
	<label for="end">끝단</label>
	<input type="text" id="end" value="2" readonly="readonly" />
	<button id="btn">구구단 출력</button>
</fieldset>
<br><hr><br>
<div id="result"></div>
</body>
</html>

selectMenu

기본 형식

<script type="text/javascript">
	$(document).ready(function() {
		$('#files').selectmenu();
	});
</script>

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

<body>
<select id="files">
	<option value="jquery">jQuery.js</option>
	<option value="jqueryui">jQueryui.js</option>
	<option value="jquery">jQuery.js</option>
	<option value="jqueryui">jQueryui.js</option>
	<option value="jquery">jQuery.js</option>
	<option value="jqueryui">jQueryui.js</option>
</select>
</body>

카테고리(선택 못함) / 목록 : 부가 옵션

<select id="files">
	1. 선택하지 못함(disabled)
	<option disabled="disabled" selected="selected">선택하세요</option>
    
    2. 그룹(목록) - optgrpup   label="~"
	<optgroup label="classA">
	<option value="jquery">jQuery.js</option>
	<option value="jqueryui">jQueryui.js</option>
	</optgroup>
	
	<optgroup label="classB">
	<option value="jquery">jQuery.js</option>
	<option value="jqueryui">jQueryui.js</option>
	</optgroup>
	
	<optgroup label="classC">
	<option value="jquery">jQuery.js</option>
	<option value="jqueryui">jQueryui.js</option>
	</optgroup>

</select>

대표 카테고리

그룹(목록)이 생김

선택한 옵션 출력

$(document).ready(function() {
		$('#files').selectmenu({
			width: 500,    --> 폭
			change: function() {    --> 선택 시에 선택한 옵션 출력하는 함수
  				console.log($(this).val());  --> 출력시, value값이 나오는 것
			}
		});
	});

select를 이용한 우편번호 검색기 ajax로 만들기(swing의 콤보박스 검색기와 유사)

1. protocol (xml / json 중 정하고 간단한 실행 흐름 적어두기)

2. zipcodeTO / DAO 생성

3. 4개의 xml.jsp(sido, gugun, dong, address) 만들기

--> DAO에서 각각 원하는 정보만 가져오도록 함

sido_xml.jsp

<%@page import="model1.ZipcodeTO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="model1.ZipcodeDAO"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	request.setCharacterEncoding("utf-8");

	ZipcodeDAO dao = new ZipcodeDAO();
	
	ArrayList<ZipcodeTO> sidos = dao.searchSido();
	
	StringBuilder sbXml = new StringBuilder();
	
	for(ZipcodeTO to : sidos) {
		String sido = to.getSido();
	
		sbXml.append("<sido>" + sido + "</sido>");		
	}
%>

<address>
<%=sbXml %>
</address>

gugun_xml.jsp

<%@page import="model1.ZipcodeTO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="model1.ZipcodeDAO"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	request.setCharacterEncoding("utf-8");

	String strSido = request.getParameter("strSido");

	ZipcodeDAO dao = new ZipcodeDAO();
	
	ArrayList<ZipcodeTO> guguns = dao.searchGugun(strSido);
	
	StringBuilder sbXml = new StringBuilder();
	
	for(ZipcodeTO to : guguns) {
		String gugun = to.getGugun();
		
		sbXml.append("<gugun>" + gugun + "</gugun>");		
	}
%>

<address>
<%=sbXml %>
</address>

dong_xml.jsp

<%@page import="model1.ZipcodeTO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="model1.ZipcodeDAO"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	request.setCharacterEncoding("utf-8");

	String strSido = request.getParameter("strSido");
	String strGugun = request.getParameter("strGugun");

	ZipcodeDAO dao = new ZipcodeDAO();
	
	ArrayList<ZipcodeTO> dongs = dao.searchDong(strSido, strGugun);
	
	StringBuilder sbXml = new StringBuilder();
	
	for(ZipcodeTO to : dongs) {
		String dong = to.getDong();
		sbXml.append("<dong>" + dong + "</dong>");		

	}
%>

<address>
<%=sbXml %>
</address>

address_xml.jsp

<%@page import="model1.ZipcodeTO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="model1.ZipcodeDAO"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	request.setCharacterEncoding("utf-8");

	String strSido = request.getParameter("strSido");
	String strGugun = request.getParameter("strGugun");
	String strDong = request.getParameter("strDong");

	ZipcodeDAO dao = new ZipcodeDAO();
	
	ArrayList<ZipcodeTO> addresses = dao.SearchZipcode(strSido, strGugun, strDong);
	
	StringBuilder sbXml = new StringBuilder();
	
	for(ZipcodeTO to : addresses) {
		String zipcode = to.getZipcode();
		String ri = to.getRi();
		String bunji = to.getBunji();	
		

		sbXml.append("<address>");
		sbXml.append("<zipcode>" + to.getZipcode() + "</zipcode>");
		sbXml.append("<sido>" + strSido + "</sido>");
		sbXml.append("<gugun>" + strGugun + "</gugun>");
		sbXml.append("<dong>" + strDong + "</dong>");
		sbXml.append("<ri>" + to.getRi() + "</ri>");
		sbXml.append("<bunji>" + to.getBunji() + "</bunji>");
		sbXml.append("</address>");
	}
%>

<addresses>
<%=sbXml %>
</addresses>

각각 만들고 들어가서 xml data 잘 나오나 확인해보기

sido 이후부터는 각각 인자의 정보를 받기 때문에 게시판의 seq처럼 주소 뒤에 쿼리를 적어줘야 한다.
&strGugun을 뒤에 추가하여 정보 주기

마지막은 나중에 표로 출력하기 위해 <addresses>로 요소들을 한번 더 묶어준다.
(기존은 중복을 제거하여 address로만 묶었음!)

4. zipcode01.jsp 만들어서 jQuery + ajax 작업하기

sido ~~ address까지 순차적으로 작업하기!

zipcode01.jsp : 실행과 동시에 sido의 옵션이 나오게끔 만들기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/cupertino/jquery-ui.css" />
<style type="text/css">
	body {font-size:80%;}
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#sido, #gugun, #dong').selectmenu({
			width:150
		});
		
		$('#sido').selectmenu({
			change: function() {
			
			}
		});
		
		$('#gugun').selectmenu({
			change: function() {
				
			}
		});
		
			
		$('#dong').selectmenu({	
			
		});
	
		$('#btn').button();
        
		//프로그램 시작과 동시에 ajax로 sido 정보 가져오기
			$.ajax({
				url: './data/sido_xml.jsp',
				type: 'get',
				dataType: 'xml',
				success: function(xml) {
					$( '#sido' ).html( '<option disabled="disabled" selected="selected">시도 선택</option>' ); 
                    <-- 마치 그룹처럼 옵션 생성됨
					$(xml).find( 'sido' ).each( function() {
						$( '#sido' ).append( '<option>' + $(this).text() + '</option>' ); 
                        <-- sido 가져와서 옵션에 추가
					});
				},
				
				error: function(err) {
					console.log("실패", err.status);
					console.log(err.responseText);
				}
			});
	});
</script>
</head>
<body>
<fieldset>
	<legend>우편번호 검색</legend>
	<label for="sido">시도</label>
	<select id="sido">
		<option disabled="disabled" selected="selected">시도 선택</option>
	</select>
	
	<label for="gugun">구군</label>
	<select id="gugun">
		<option disabled="disabled" selected="selected">구군 선택</option>
	</select>
	
	<label for="dong">동</label>
	<select id="dong">
		<option disabled="disabled" selected="selected">동 선택</option>
	</select>
	<button id="btn">검색</button>
</fieldset>
<br><hr><br>
<div id="result"></div>
<table border="1", width="800">
<tr>
	<td>우편번호</td>
	<td>시도</td>
	<td>구군</td>
	<td>동</td>
	<td>리</td>
	<td>번지</td>
</tr>
</table>
</body>
</html>

zipcode02.jsp : sido를 선택하면 그에 맞는 gugun이 나오게끔 작업

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/cupertino/jquery-ui.css" />
<style type="text/css">
	body {font-size:80%;}
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
    
		$('#sido').selectmenu({ 
			width:150,
			change: function() {  <-- sido값을 선택했을 때 이벤트 걸어주고 ajax로 gugun 값 가져오기
			$.ajax({
				//url: './data/gugun.jsp?sido=' + $('#sido').val(),
				url: './data/gugun_xml.jsp', <-- 위처럼 사용해도 되지만
                url이 길어지기 때문에 밑에처럼 data를 적고 사용해도 된다.
				type: 'get',
				data: {
					strSido: $( '#sido' ).val()
				},
				dataType: 'xml',
				success: function(xml) {
					$( '#gugun' ).empty();  <-- 검색 후 옵션 선택결과 지우기 위해서
					
					$( '#gugun' ).html( '<option disabled="disabled" selected="selected">구군 선택</option>' );
					$( xml ).find( 'gugun' ).each( function() {
						$( '#gugun' ).append( '<option>' + $(this).text() + '</option>' );
					});
					
					$( '#gugun' ).selectmenu( 'refresh' ); <-- sido를 다시 선택할시,
                    gugun 데이터가 바뀌지 않는데  새로고침을 해줘서 데이터를 원활하게 나오게 하기 위해 사용
				},
				
				error: function(err) {
					console.log("실패", err.status);
					console.log(err.responseText);
				}
			});
		}
	});
		
		$('#gugun').selectmenu({
			change: function() {
				
			}
		});
		
			
		$('#dong').selectmenu({	
			change: function() {
				
			}
		});
	
		$('#btn').button();
		
			$.ajax({
				url: './data/sido_xml.jsp',
				type: 'get',
				dataType: 'xml',
				success: function(xml) {
					$( '#sido' ).html( '<option disabled="disabled" selected="selected">시도 선택</option>' );
					$(xml).find( 'sido' ).each( function() {
						$( '#sido' ).append( '<option>' + $(this).text() + '</option>' );
					});
				},
				error: function(err) {
					console.log("실패", err.status);
					console.log(err.responseText);
				}
			});
		});
</script>

zipcode03.jsp : sido, gugun을 선택했을 때, dong이 알맞게 나오게끔 작업

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/cupertino/jquery-ui.css" />
<style type="text/css">
	body {font-size:80%;}
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function() {	
		$('#sido').selectmenu({
			width:150,
			change: function() {
			$.ajax({
				//url: './data/gugun.jsp?sido=' + $('#sido').val(),
				url: './data/gugun_xml.jsp',
				type: 'get',
				data: {
					strSido: $( '#sido' ).val()
				},
				dataType: 'xml',
				success: function(xml) {
					$( '#gugun' ).empty();
					
					$( '#gugun' ).html( '<option disabled="disabled" selected="selected">구군 선택</option>' );
					$( xml ).find( 'gugun' ).each( function() {
						$( '#gugun' ).append( '<option>' + $(this).text() + '</option>' );
					});
					
					$( '#gugun' ).selectmenu( 'refresh' );
				},
				
				error: function(err) {
					console.log("실패", err.status);
					console.log(err.responseText);
				}
			});
		}
	});
		
		$('#gugun').selectmenu({
			width:150,
			change: function() { <-- gugun 선택시 이벤트
				$.ajax({
					url: './data/dong_xml.jsp',
					type: 'get',
					data: {
						strSido: $( '#sido' ).val(),
						strGugun: $( '#gugun' ).val()  <-- url에 넘길 정보가 2개이므로 이렇게 써줌
					},
					dataType: 'xml',
					success: function(xml) {
						$( '#dong' ).empty();
						
						$( '#dong' ).html( '<option disabled="disabled" selected="selected">동 선택</option>' );
						$( xml ).find( 'dong' ).each( function() {
							$( '#dong' ).append( '<option>' + $(this).text() + '</option>' );
						});
						
						$( '#dong' ).selectmenu( 'refresh' );
					},
					
					error: function(err) {
						console.log("실패", err.status);
						console.log(err.responseText);
					}
				});
				
			}
		});
		
			
		$('#dong').selectmenu({	
			change: function() {
				
			}
		});
	
		$('#btn').button();
		
			$.ajax({
				url: './data/sido_xml.jsp',
				type: 'get',
				dataType: 'xml',
				success: function(xml) {
					$( '#sido' ).html( '<option disabled="disabled" selected="selected">시도 선택</option>' );
					$(xml).find( 'sido' ).each( function() {
						$( '#sido' ).append( '<option>' + $(this).text() + '</option>' );
					});
				},
				error: function(err) {
					console.log("실패", err.status);
					console.log(err.responseText);
				}
			});
		});
</script>

zipcode04.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/cupertino/jquery-ui.css" />
<style type="text/css">
	body {font-size:80%;}
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function() {	
		$('#sido').selectmenu({
			width:150,
			change: function() {
			$.ajax({
				//url: './data/gugun.jsp?sido=' + $('#sido').val(),
				url: './data/gugun_xml.jsp',
				type: 'get',
				data: {
					strSido: $( '#sido' ).val()
				},
				dataType: 'xml',
				success: function(xml) {
					$( '#gugun' ).empty();
					
					$( '#gugun' ).html( '<option disabled="disabled" selected="selected">구군 선택</option>' );
					$( xml ).find( 'gugun' ).each( function() {
						$( '#gugun' ).append( '<option>' + $(this).text() + '</option>' );
					});
					
					$( '#gugun' ).selectmenu( 'refresh' );
				},
				
				error: function(err) {
					console.log("실패", err.status);
					console.log(err.responseText);
				}
			});
		}
	});
		
		$('#gugun').selectmenu({
			width:150,
			change: function() {
				$.ajax({
					url: './data/dong_xml.jsp',
					type: 'get',
					data: {
						strSido: $( '#sido' ).val(),
						strGugun: $( '#gugun' ).val()
					},
					dataType: 'xml',
					success: function(xml) {
						$( '#dong' ).empty();
						
						$( '#dong' ).html( '<option disabled="disabled" selected="selected">동 선택</option>' );
						$( xml ).find( 'dong' ).each( function() {
							$( '#dong' ).append( '<option>' + $(this).text() + '</option>' );
						});
						
						$( '#dong' ).selectmenu( 'refresh' );
					},
					
					error: function(err) {
						console.log("실패", err.status);
						console.log(err.responseText);
					}
				});
				
			}
		});
		
			
		$('#dong').selectmenu({	
			width: 150,
			change: function() {
				
			}
		});
	
		$('#btn').button().on('click', function() {  <-- 옵션 다 선택 후 버튼 클릭시 발생
			$.ajax({
				url: './data/address_xml.jsp',
				type: 'get',
				data: {
					strSido: $( '#sido' ).val(),
					strGugun: $( '#gugun' ).val(),
					strDong: $( '#dong' ).val()  < -- url에 넘길 정보가 3개
				},
				dataType: 'xml',
				success: function(xml) {
					let html = '<table border="1" width="800">';
                    <-- 옵션에 맞게 정보들 테이블 형식으로 출력
					$( xml ).find( 'address' ).each( function() {
						html += '<tr>';
						html += '<td>' + $(this).find('zipcode').text() + '</td>';
						html += '<td>' + $('#sido').val() + '</td>';  <--내가 선택한 것 출력하도록 하기
						html += '<td>' + $('#gugun').val() + '</td>';  <== ""
						html += '<td>' + $('#dong').val() + '</td>';   <== ""
						html += '<td>' + $(this).find('ri').text() + '</td>';
						html += '<td>' + $(this).find('bunji').text() + '</td>';
						html += '</tr>';
					});
						html += '</table>';
					
					$( '#result' ).html(html);  <-- result에 넘겨주기
				},
				
				error: function(err) {
					console.log("실패", err.status);
					console.log(err.responseText);
				}
			});
		});
		
			$.ajax({
				url: './data/sido_xml.jsp',
				type: 'get',
				dataType: 'xml',
				success: function(xml) {
					$( '#sido' ).html( '<option disabled="disabled" selected="selected">시도 선택</option>' );
					$(xml).find( 'sido' ).each( function() {
						$( '#sido' ).append( '<option>' + $(this).text() + '</option>' );
					});
				},
				error: function(err) {
					console.log("실패", err.status);
					console.log(err.responseText);
				}
			});
		});
</script>
</head>
<body>
<fieldset>
	<legend>우편번호 검색</legend>
	<label for="sido">시도</label>
	<select id="sido">
		<option disabled="disabled" selected="selected">시도 선택</option>
	</select>
	
	<label for="gugun">구군</label>
	<select id="gugun">
		<option disabled="disabled" selected="selected">구군 선택</option>
	</select>
	
	<label for="dong">동</label>
	<select id="dong">
		<option disabled="disabled" selected="selected">동 선택</option>
	</select>
	<button id="btn">검색</button>
</fieldset>
<br><hr><br>
<table border="1" width="800">
<tr>
	<td width="15%">우편번호</td>
	<td width="9%">시도</td>
	<td width="16%">구군</td>
	<td width="14%">동</td>
	<td width="24%">리</td>
	<td>번지</td>
</tr>
</table>
	<div id="result"></div>

</body>
</html>

이준영

끄적끄적

이전 포스트

23.05.16

다음 포스트

23.05.17

jQuery UI 준비

UI 버튼

버튼 뿐 아니라 다른 것들도 버튼화가 가능

버튼에 이벤트 주기

버튼에 아이콘 달기

UI checkboxradio

checkbox

radio

토글 버튼

라디오 이벤트

UI progressbar : 진행바

기본 진행바

진행바의 값 출력

버튼 누르면 감소 / 증가 되는 bar

UI slider

slider 값 출력

1. 버튼을 누를 시 값 출력하기

2. 슬라이더 커서를 움직일시 값 출력

range slider

UI spiner

기본 형식

값 가져오기

응용 : spinner로 구구단

selectMenu

기본 형식

카테고리(선택 못함) / 목록 : 부가 옵션

선택한 옵션 출력

select를 이용한 우편번호 검색기 ajax로 만들기(swing의 콤보박스 검색기와 유사)

1. protocol (xml / json 중 정하고 간단한 실행 흐름 적어두기)

2. zipcodeTO / DAO 생성

3. 4개의 xml.jsp(sido, gugun, dong, address) 만들기

sido_xml.jsp

gugun_xml.jsp

4. zipcode01.jsp 만들어서 jQuery + ajax 작업하기

23.05.16

23.05.18

0개의 댓글