매일 조금씩

01/14 - jQuery + Ajax , jQuery UI (1) 본문

빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정

01/14 - jQuery + Ajax , jQuery UI (1)

mezo 2021. 1. 31. 18:24
728x90
반응형

jQuery

         - Javascript Dom Framework(Library)

         - selector

         - 메서드

         - 이벤트

         jQuery.com

 

         google/naver -> api -> 공식사이트

 

 

 

jQuery를 왜해야하냐? 

DOM을 다루는 좋은 방법이기도 하지만 

* 전자정부프레임워크

공공기관은 전자정부프레임워크로 작업을 한다.

오픈소스를 집어서 결합을 시킨거다.

전자정부프레임워크에서 DOM을 다루는 표준 라이브러리를 jQuery로 정해놨다.

'전자정부프레임워크 > 표준프레임워크 소개 > 구성 > 오픈소스 현황'

여기서 온라인 강의 배워보는 것도 좋다. 이력서 한줄이다. 

 

 

 

 

jQuery에서 ajax를 다루려면 ..

$.ajax 를 쓴다.

$.ajax({

        url:       *

        type: get/post      *

        data

        async       // default가 비동기여서 생략 많이함

        dataType  // 리턴 형식

        success    // 전송이 제대로 됐냐 (success => 4. 200)        *

        error                                  *

})

 

*는 필수

필수인걸 빼고 나머지는 안써주면 default 값이 있다.

 

 

 

 

 

 

 

 

jQuery에서 Ajax 가져다 쓰기

jQueryEx02

 

실습1) ajax 사용

> ex01.jsp

dataType을 안쓰면 자동으로 타입을 지정한다. data가 xml이면 xml로 자동 지정.

ajax만 사용할 때보다 jQuery를 통해 ajax를 사용해서 xml을 가져오면 좀더 쉽게 가져올 수 있다.

 

data를 url에 붙이려면 url에 ?를 붙여서 data를 연결시켜도 되고 

data: { 키: 값 }을 써도된다. 

 

 

실습2) jQuery에 ajax써서 xml 조회

 

 

> xml2.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ page import="javax.naming.Context"%>
<%@ page import="javax.naming.InitialContext"%>
<%@ page import="javax.naming.NamingException"%>
<%@ page import="javax.sql.DataSource"%>

<%@ page import="java.sql.Connection"%>
<%@ page import="java.sql.PreparedStatement"%>
<%@ page import="java.sql.ResultSet"%>
<%@ page import="java.sql.SQLException"%>

<%
	String strName = request.getParameter("name");
	//String strName = "웹을";	

	Connection conn= null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	StringBuffer result = new StringBuffer();
	
	try{
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup("java:comp/env");
		DataSource dataSource = (DataSource)envCtx.lookup("jdbc/mariadb2");
	
		conn = dataSource.getConnection();
		
		String sql = "select name, publisher, author, price from books where name like ?";
		pstmt = conn.prepareStatement(sql);
		pstmt.setString(1, "%" + strName + "%");
		
		rs = pstmt.executeQuery();
		
		// jdom 복잡한걸 할 때 이걸 쓴다.
		result.append("<books>");
		while(rs.next()){
			result.append("<book>");
				result.append("<name>"+rs.getString("name")+"</name>");
				result.append("<publisher>"+rs.getString("publisher")+"</publisher>");
				result.append("<author>"+rs.getString("author")+"</author>");
				result.append("<price>"+rs.getString("price")+"</price>");
			result.append("</book>");
		}
		result.append("</books>");
		
	}catch(NamingException e){
		System.out.println("[에러]" + e.getMessage());
	}catch(SQLException e){
		System.out.println("[에러]" + e.getMessage());
	}finally{
		if(rs != null)rs.close();
		if(pstmt != null) pstmt.close();
		if(conn != null) conn.close();
	}
	
	out.println(result);
%>

> ex02.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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').on('click', () => {
			$.ajax({
				//url:"./data/xml2.jsp?name=CSS",
				url:"./data/xml2.jsp",
				data: {
					'name' : "CSS"
				},
				type: 'get',
				dataType: 'text', 
				success: function(data){
					//console.log('성공');
					//console.log(typeof data);
					$(data).find('book').each(function(){
						console.log($(this).find('name').text());
						console.log($(this).find('price').text());
					});
				},
				error: function(){
					console.log('실패');
				}
			});	
		});
	});
</script>
</head>
<body>
<button id="btn">요청</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

jQuery UI

jqueryui.com

javascript의 swing이다. 

가장 먼저 라이브러리를 통해서 설정을 해줘야한다.

베이스는 jQuery이다.

 

※ 프로젝트 세팅

1) js 폴더를 만들어서 jQuery를 위한 라이브러리 두개를 먼저 추가한다.

 

 

 

2) jqueryui.com 에 접속해서 아래의 두개를 다운로드한다. 

 

 

 

3) 2번에서 Stable을 다운로드해서 나온 js파일 두개를 복사하여 프로젝트의 js폴더에 넣는다.

 

 

 

4) js폴더와 같이 WebContent에 css 폴더를 만든다. 

 

5) 2번에서 theme을 다운로드하면 theme폴더가 있는데 그안의 폴더를 모두 복사하여 프로젝트의 css폴더에 넣는다. 

 

 

 

6) jsp 파일의 <head>에 아래의 태그를 써준다. (물론 jquery 것도 있어야한다.)

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

 

7) <head>에 아래의 <link>도 추가해주어야한다.

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />

여기서 ui-darkness가 쓰여진 부분은 원하는 디자인 테마의  폴더 명으로 바꿔주면된다. 

 

 

8) jQuery UI가 적용된 기본 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/ui-darkness/jquery-ui.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	});
</script>
</head>
<body>

</body>
</html>

 

 

 

 

실습1) jQuery UI 적용하기 

> jQueryUIEx01

1. 버튼 디자인 적용 - button()

> ex01.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/ui-darkness/jquery-ui.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#btn2').button();
		$('input[type="button"]').button();
		$('input[type="submit"]').button();
		
		$('a').button();
		$('#btn3').button();
	});
</script>
</head>
<body>

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

<a href="https://www.daum.ner">다음 바로가기</a><br /><br />
<div id="btn3">버튼5</div><br /><br />

</body>
</html>

버튼이아닌것도 버튼으로만들어 줄수 있다. 

(ex. a태그, div 태그 등 ...)

 

 

2. 버튼 디자인 적용 + 이벤트 , a태그를 버튼처럼 만들기

> ex02.jsp

여기서 중요하게 봐야할 건 <a>태그이다. 

보통 a태그에 디자인과 이벤트를 주면 a고유의 기능을 포함하고 있는데

그걸 e.preventDefault로 없애서 일반 버튼처럼 만들수 있다.

// a라는 링크를 버튼처럼 만들수 있음
$('a').button().on('click', function(e){
    alert('버튼 클릭');
    // 전송기능 제거
    e.preventDefault();
});

 

 

3. form action을 실행시키지 않기

> ex03.jsp

2번의 a태그처럼 e.preventDefault를 사용한다.

// form의 action을 무효화
$('input[type="submit"]').button().on('click', function(e){
    alert('버튼 클릭');
    e.preventDefault();
});

 

4. 버튼에 아이콘 집어넣기

> ex04.jsp

옵션은 거의 다 객체로 들어간다.

  • icon : 아이콘 이름
  • iconPosition : end, front등 위치
  • showLabel: 버튼에 글자 보이게 할건지 (true/false)
$(document).ready(function(){
    $('#btn1').button({
        icon: 'ui-icon-gear',
        iconPosition: 'end'
    });
    $('#btn2').button({
        icon: 'ui-icon-power',
        showLabel: false
    });
});

 

 

5. 체크박스 버튼 - checkboxradio()

> ex05.jsp

<label>에 for속성으로 체크박스 아이디를 넣어서 체크박스와 연결시킬 수 있다.

<fiedlset>으로 여러개 태그를 묶고 <legend>로 묶음 이름을 보일 수 있다.

$(document).ready(function(){
    $('input[type="checkbox"]').checkboxradio({
        //icon: false;
    });
});
<fieldset>
	<legend>상품등급</legend>
	<label for="cb-1">1 Star</label>
	<input type="checkbox" id="cb-1" />
	<label for="cb-2">2 Star</label>
	<input type="checkbox" id="cb-2" />
	<label for="cb-3">3 Star</label>
	<input type="checkbox" id="cb-3" />
	<label for="cb-4">4 Star</label>
	<input type="checkbox" id="cb-4" />
</fieldset>

 

 

6. 라디오 버튼 - checkboxradio()

> ex06.jsp

radio는 하나만 선택가능해야 하기때문에 name 속성을 전부 추가하는데 같은 name으로 해준다.

(기존에 써둔 id는 중복값 안되기 때문)

$(document).ready(function(){
    $('input[type="radio"]').checkboxradio().on('click', function(){
        alert('클릭');	
    });
});
<fieldset>
	<legend>상품등급</legend>
	<label for="cb-1">1 Star</label>
	<input type="radio" name="r1" id="cb-1" />
	<label for="cb-2">2 Star</label>
	<input type="radio" name="r1" id="cb-2" />
	<label for="cb-3">3 Star</label>
	<input type="radio" name="r1" id="cb-3" />
	<label for="cb-4">4 Star</label>
	<input type="radio" name="r1" id="cb-4" />
</fieldset>

 

 

7. progress bar - progressbar()

> ex07.jsp

progressbar()에 value값을 주면 progress bar가 조정이 된다. 

적용할 값이 하나일 땐 객체로 progressbar({ 키: 값 }) 이렇게 안쓰고 progressbar(키, 값) 이렇게 써도 된다. 

 

$(document).ready(function(){
    let data = 50;
    $('#progressbar').progressbar({
        value: data
    });

    $('#btn1').button().on('click', function(){
        console.log(data);
        data -= 5; 
        $('#progressbar').progressbar('value', data);
    });

    $('#btn2').button().on('click', function(){
        console.log(data);
        data += 5; 
        $('#progressbar').progressbar('value', data);

    });
});
<div id="progressbar"></div>
<br /><hr /><br />
<div>
	<button id="btn1">감소</button>
	<button id="btn2">증가</button>
</div>

 

 

8. slider - slider()

> ex08.jsp

  • orientation : vertical 하면 세로가됨
  • value :  값조정
  • min : 최솟값
  • max : 최댓값
  • change: 값이 바꼈을 때 실행되는 function()이며 드래그하다가 딱 놓으면 발생한다.  fuction(e, ui)로 정의하면 ui.value로 값을 가져올 수 있다.아니면 $(this).slider('value')로 가져와야한다.
  • step : 증가치
  • slider : 값이 바꼈을 때 실행되는 function()인데 change와 다르게 드래그 중일 때 발생한다. 이걸로 color picker랑 가격 상한 하한 정하는 range slider를 만들수 있다. 

인자로 값 가져와서 values[]로 사용 가능!

$(document).ready(function(){
    $('#slider').slider({
        range: true,
        values:[75, 150],
        min: 0,
        max: 200,
        slide: function(event, ui){
            //console.log( $(this).slider('values', 0),'-',$(this).slider('values', 1));
            console.log(ui.values[0], '-', ui.values[1]);
        }
    });
});
<div id="progressbar"></div>
<br /><hr /><br />
<div id="slider"></div>

 

 

9. range slider  - slider

> ex09.jsp

 values : [시작값, 끝값]를 사용한다. 

값 가져올때도 $(this).slider('values', 0) 과 $(this).slider('values', 1)로 시작값과 끝값을 가져온다.

$(document).ready(function(){
    $('#slider').slider({
        //orientation: 'vertical'
        value:50,
        min: 0,
        max: 200,

        /*
        step: 25,
        // 드래그해서 딱 놓으면 발생 
        change: function(e, ui){
            console.log('change');
            console.log($(this).slider('value'));
            console.log(ui.value);
        }
        */

        // 지속적임 드래그할 때 발생 
        slide: function(e, ui){
            console.log('slide');
        }
    });
});
<div id="progressbar"></div>
<br /><hr /><br />
<div id="slider"></div>

 

 

 

응용 실습 1) jQuery에서 Ajax 불러와서 쓰는 방법으로 우편번호 검색하기 구현

> ZipcodeAjaxEx01

> zipcodejQuery2.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>
<style type="text/css">
</style>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').on('click', () => {
			console.log($('#dong').val());
			
			$.ajax({
				url:"./data/xml.jsp",
				data: {
					'strDong' : $('#dong').val()
				},
				type: 'get',
				dataType: 'text', 
				success: function(data){
					var seqs = new Array();
					var zipcodes = new Array();
					var sidos = new Array();
					var guguns = new Array();
					var dongs = new Array();
					var ris = new Array();
					var bunjis = new Array();
					
					$(data).find( 'seq' ).each( function(){
						seqs.push($(this).html());
					});
					$(data).find( 'zipcode' ).each( function(){
						zipcodes.push($(this).html());
					});
					$(data).find( 'sido' ).each( function(){
						sidos.push($(this).html());
					});
					$(data).find( 'gugun' ).each( function(){
						guguns.push($(this).html());
					});
					$(data).find( 'dong' ).each( function(){
						dongs.push($(this).html());
					});
					$(data).find( 'ri' ).each( function(){
						ris.push($(this).html());
					});
					$(data).find( 'bunji' ).each( function(){
						bunjis.push($(this).html());
					});
					
					
					let result = '<table width="800" border="1">';
					for(let i=0; i<seqs.length; i++){
						let seqValue = seqs[i];
						let zipcodeValue = zipcodes[i];
						let sidoValue = sidos[i];
						let gugunValue = guguns[i];
						let dongValue = dongs[i];
						let riValue = ris[i];
						let bunjiValue = bunjis[i];
						
						result += '<tr>';
						result += '<td>' + seqValue +'</td>';
						result += '<td>' + zipcodeValue +'</td>';
						result += '<td>' + sidoValue +'</td>';
						result += '<td>' + gugunValue +'</td>';
						result += '<td>' + dongValue +'</td>';
						result += '<td>' + riValue +'</td>';
						result += '<td>' + bunjiValue +'</td>';
						result += '</tr>';
						
					}
					result += '</table>';
					
					$('#result').append(result);
				},
				error: function(){
					alert("에러페이지");
				}
			});
						
		});
	});
</script>
</head>
<body>
	<form>
		동이름: <input type="text" id="dong" size="30" /> <input type="button"
			id="btn" value="우편번호 검색" />
	</form>
	<hr />
	<br />
	<div id="result"></div>

</body>
</html>

 

 

 

10. spinner  -  spinner()

> ex10.jsp

그냥 두면 값이 입력이 되기때문에 

태그안에 readonly해줘야함

태그안에 value로 초기값 줄수 있음.

min, max, step 모두 slider랑 같음.

spin은 값 변할 때 동작

값 확인, 값 넣기 모두 가능

$(document).ready(function(){
    $('#spinner').spinner({
        min: 5,
        max: 155,
        step: 10,
        spin: function(){
            console.log($(this).spinner('value'));
        }
    });

    $('#btn').button().on('click',function(){
        // 값 확인
        // console.log($('#spinner').spinner('value'));

        // 값 넣기
        $('#spinner').spinner('value',105);
    });
});
<input type="text" id="spinner" value="15" readonly/>
<br /><hr /><br />
<button id="btn">값 확인</button>

 

 

11. selectmenu - selectmenu() 

> ex11.jsp

$(document).ready(function(){
    $('#files1').selectmenu({
        width: 500,
        change: function(event, ui){
            //console.log($(this).val());
            console.log(ui.item.value);
        }
    });

    $('#files2').selectmenu({
        width: 500,
        change: function(event, ui){
            //console.log($(this).val());
            console.log(ui.item.value);
        }
    });

    $('#btn').on('click',() => {
        console.log($(this).val());
    });
});
<select id="files1">
		<option value="jquery">jQuery.js</option>
		<option value="jqueryui">ui.jQuery.js</option>
		<option value="somefile">some unknown file</option>
</select>

<br /><br />

<select id="files2">
	<optgroup label="Script">
		<option value="jquery">jQuery.js</option>
		<option value="jqueryui">ui.jQuery.js</option>
	</optgroup>
	<optgroup label="Other Files">
		<option value="somefile">some unknown file</option>
		<option value="somefile">some unknown file</option>
	</optgroup>
</select>

<button id="btn">i am button</button>

 

 

 

응용실습 2) 시작단 , 끝단 입력받아서 구구단 테이블 출력 

> gugudan.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/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body{ font-size:80%; }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		
		$('#startdan, #enddan').selectmenu({
			width: 200
		});
		
		let result = '<table width="800" border="1">';
		$('#btn').button().on('click',function(){
			
			const startdan = $('#startdan').val();
			const enddan = $('#enddan').val();
			
			console.log(startdan,enddan);
			
			for(let row=startdan; row<=enddan; row++){
				result += '<tr>'
				for(let col=1; col<=9; col++){
					result += '<td>'+ row + 'X' + col + '=' + row*col + '</td>'; 					
				}
				result += '</tr>'
			}
			result += '</table>';
			
			$('#result').append(result);
		});
	});
</script>
</head>
<body>

<select id="startdan">
		<option value="0">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
</select>
<select id="enddan">
		<option value="0">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
</select>
<button id="btn">구구단 출력</button>

<hr /><br />
<div id="result"></div>

</body>
</html>

 

 

 

 

 

 

 

 실습 3) 좀더 데이터에 관한 내용들..

1. autocomplete - autocomplete()

자동 완성 기능인데 

서버에서 이 데이터들을 가져올 때 Ajax를 사용하면 편하다!

trimDirectiveWhitespaces="true" 이걸 <%@ 에 써주면 공백 자동 없애준다.

> ex12.jsp

$(document).ready(function(){
    $.ajax({
        url: './data/json.jsp',
        type: 'get',
        dataType: 'json',
        success: function(json){
            //console.log(json);
            const availableTags = json.data;

            $('#tags').autocomplete({
                source: availableTags
            });
        },
        error: function(){

        }
    });

    // autocomplete으로 만드는데 데이터는 availableTags에서 가져올거야!
    //$('#tags').autocomplete({
    //	source: availableTags
    //});

});
<input type="text" id="tags" />

> data > json.jsp

<%@ page language="java" contentType="text/json; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
{
	"data":["ActionScript","AppleScript","Asp","BASIC",
		"C","C++","Clojure","COBOL","ColdFusion",
		"Erlang","Fortran","Groovy","Haskell","Java","JavaScript",
		"Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"]
}

 

 

새로고침 같은게 필요가 없다.  이건 Ajax의 가장 강력한 장점이다. 

 

네이버도 이걸로 자동완성한다. 

진짠지 네이버홈페이지에서 개발자도구 > network 로 확인가능 

 

 

 

데이터를 보여주는 것 중 재밌는거 

2. accordion - accordian()

accordion에 데이터를 추가하면?

그냥 append까지만 하면 accordion처럼 안나오기 때문에 accordiOn화가 필요하다.

아래 코드를 추가하면 accordion화 된다.

$('#accordion').accordion('refresh');

> ex13.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/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body{ font-size:80%; }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#accordion').accordion();
		
		$('#btn').button().on('click', function(){
			let data = '<h3>Section 5</h3>';
			data += '<div>';
			data += '	<p>';
			data += '	새로운 데이터';
			data += '	새로운 데이터';
			data += '	새로운 데이터';
			data += '	</p>';
			data += '</div>';
			
			$('#accordion').append(data);
			
			// accordion화 시킴
			$('#accordion').accordion('refresh');
			
		});
		
	});
</script>
</head>
<body>

<button id="btn">추가</button>
<br /><hr /><br />
<div id="accordion">
	<h3>Section 1</h3>
	<div>
	    <p>
	    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
	    </p>
	</div>
	<h3>Section 2</h3>
	<div>
	    <p>
	    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
	    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
	    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
	    suscipit faucibus urna.
	    </p>
	</div>
	<h3>Section 3</h3>
	<div>
	    <p>
	    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
	    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
	    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
	    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
	    </p>
	    <ul>
		    <li>List item one</li>
		    <li>List item two</li>
		    <li>List item three</li>
	    </ul>
	</div>
	<h3>Section 4</h3>
	<div>
	    <p>
	    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
	    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
	    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
	    mauris vel est.
	    </p>
	    <p>
	    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
	    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
	    inceptos himenaeos.
	    </p>
	</div>
</div>
</body>
</html>

 

 

 

 

 

응용 실습) 동이름 넣고 검색 누르면 주소가 accordion형식으로 출력

 

결과 출력화면

 

 

 

1. xml 받아서 javascript 배열로 구현 

> zipcodejQueryAjaxXml1.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/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body{ font-size:80%; }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		// 동적배열에 전체 seq, sido, ... 각각 다 담아서 돌리기
		
		//$('#accordion').accordion();
		
		$('#btn').button().on('click', () => {
			console.log($('#dong').val());
			
			$.ajax({
				url:"./data/xml.jsp",
				data: {
					'strDong' : $('#dong').val()
				},
				type: 'get',
				dataType: 'text', 
				success: function(data){
					var seqs = new Array();
					var zipcodes = new Array();
					var sidos = new Array();
					var guguns = new Array();
					var dongs = new Array();
					var ris = new Array();
					var bunjis = new Array();
					
					$(data).find( 'seq' ).each( function(){
						seqs.push($(this).html());
					});
					$(data).find( 'zipcode' ).each( function(){
						zipcodes.push($(this).html());
					});
					$(data).find( 'sido' ).each( function(){
						sidos.push($(this).html());
					});
					$(data).find( 'gugun' ).each( function(){
						guguns.push($(this).html());
					});
					$(data).find( 'dong' ).each( function(){
						dongs.push($(this).html());
					});
					$(data).find( 'ri' ).each( function(){
						ris.push($(this).html());
					});
					$(data).find( 'bunji' ).each( function(){
						bunjis.push($(this).html());
					});
					
					
					let result = '';
					for(let i=0; i<seqs.length; i++){
						let seqValue = seqs[i];
						let zipcodeValue = zipcodes[i];
						let sidoValue = sidos[i];
						let gugunValue = guguns[i];
						let dongValue = dongs[i];
						let riValue = ris[i];
						let bunjiValue = bunjis[i];
						
						result += '<h3>'+ zipcodeValue +'</h3>';
						result += '<p>';
						result += sidoValue +','+ gugunValue +','+ dongValue +','+ riValue +','+ bunjiValue ;
						result += '</p>';
					}
					
					console.log(result);
					$('#accordion').append(result);
					
					$('#accordion').accordion();
					
					//$('#accordion').accordion('refresh');
				},
				error: function(){
					alert("에러페이지");
				}
			});
						
		});
	});
</script>
</head>
<body>
	
동이름: <input type="text" id="dong" size="30" /> 
<button id="btn">우편번호 검색</button>

<hr />
<br />
<div id="accordion"></div>
</body>
</html>

text로 받음 (xml로 받아도 결과 같음)

 

 

2. xml 받아서 address태그 별로 돌면서 구현

> zipcodejQueryAjaxXml2.jsp

text로 받음 (xml로 받아도 결과 같음)

<%@ 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/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body{ font-size:80%; }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		// 배열 없이 address하나씩 돌기	
	
		//$('#accordion').accordion();
		
		$('#btn').button().on('click', () => {
			console.log($('#dong').val());
			
			$.ajax({
				url:"./data/xml.jsp",
				data: {
					'strDong' : $('#dong').val()
				},
				type: 'get',
				dataType: 'text', 
				success: function(data){
					
					let result = '';
					
					let seqValue = '';
					let zipcodeValue = '';
					let sidoValue = '';
					let gugunValue = '';
					let dongValue = '';
					let riValue = '';
					let bunjiValue = '';
					
					$(data).find('address').each( function(){
						seqValue = $(this).find('seq').html();
						zipcodeValue = $(this).find('zipcode').html();
						sidoValue = $(this).find('sido').html();
						gugunValue = $(this).find('gugun').html();
						dongValue = $(this).find('dong').html();
						riValue = $(this).find('ri').html();
						bunjiValue = $(this).find('bunji').html();
						
						
						result += '<h3>'+ zipcodeValue +'</h3>';
						result += '<p>';
						result += sidoValue +','+ gugunValue +','+ dongValue +','+ riValue +','+ bunjiValue ;
						result += '</p>';
					});
						
					
					
					console.log(result);
					$('#accordion').append(result);
					
					$('#accordion').accordion();
					
					//$('#accordion').accordion('refresh');
				},
				error: function(){
					alert("에러페이지");
				}
			});
						
		});
	});
</script>
</head>
<body>
	
동이름: <input type="text" id="dong" size="30" /> 
<button id="btn">우편번호 검색</button>

<hr />
<br />
<div id="accordion"></div>
</body>
</html>

 

3. json 받아서 구현 

> zipcodejQueryAjaxJson.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/ui-lightness/jquery-ui.css" />
<style type="text/css">
	body{ font-size:80%; }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		// JSON으로 받기
		
		//$('#accordion').accordion();
		
		$('#btn').button().on('click', () => {
			console.log($('#dong').val());
			
			$.ajax({
				url:"./data/json2.jsp",
				data: {
					'strDong' : $('#dong').val()
				},
				type: 'get',
				dataType: 'json', 
				success: function(data){
					
					let result = '';
					for(let i=0; i<data.length; i++){
						let seqValue = data[i].seq;
						let zipcodeValue = data[i].zipcode;
						let sidoValue = data[i].sido;
						let gugunValue = data[i].gugun;
						let dongValue = data[i].dong;
						let riValue = data[i].ri;
						let bunjiValue = data[i].bunji;
						
						result += '<h3>'+ zipcodeValue +'</h3>';
						result += '<p>';
						result += sidoValue +','+ gugunValue +','+ dongValue +','+ riValue +','+ bunjiValue ;
						result += '</p>';
					}
					
					console.log(result);
					$('#accordion').append(result);
					
					$('#accordion').accordion();
					
					//$('#accordion').accordion('refresh');
				},
				error: function(){
					alert("에러페이지");
				}
			});
						
		});
	});
</script>
</head>
<body>
<fieldset>
	<legend>우편번호 검색기</legend>	
	동이름: <input type="text" id="dong" size="30" /> 
	<button id="btn">우편번호 검색</button>
</fieldset>
<br />
<hr />
<br />
<div id="accordion"></div>
</body>
</html>

 

 

 

 

 

 

!!! 오늘의 포인트 !!!

jQuery든 jQuery UI든 쓰려면 라이브러리를 꼭 다운받아서 프로젝트에 추가해야 한다.

여기서 jQuery UI의 theme은 css폴더를 따로 만들어서 추가해야한다. 

 

jQuery든 javascript든 function에서 인자값으로 그 시점의 value를 가져올수있다. 

 

 

728x90
반응형

'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' 카테고리의 다른 글

01/18 - W2ui, Bootstrap(1) : javascript를 지원하는 다양한 라이브러리  (0) 2021.01.31
01/15 - jQuery UI(2) : 사용법, jQuery UI로 model2 게시판 구현하기  (0) 2021.01.31
01/13 - jQuery(2) : 사용법, 우편번호 검색기  (0) 2021.01.31
01/12 - Ajax(2) : 우편번호 검색기 만들기 , jQuery(1) : 쓰는법  (0) 2021.01.25
01/11 - Ajax(1) : 데이터 전송형식(csv, xml, json)별로 데이터베이스에서 값 가져오는 방법, XMLHttpRequest 객체 - 동기, 비동기(readyState, State Code)  (0) 2021.01.17
'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' Related Articles more