* on( ) 함수
1. 비동적
$("요소").on("이벤트", function() {
... 이벤트 처리 ...
});
2. 동적
- 앞으로 동적으로 추가할 요소에 대한 이벤트를 미리 정의해 놓는 기능이다.
- 새로 추가될 요소에 대한 이벤트이기 때문에 이 이벤트가 정의되는 시점에서는 대상이
존재하지 않기 때문에, 이 이벤트는 document 객체에 설정해야 한다.
$(document).on( "이벤트", "셀렉터", function() {
... 이벤트 처리 ...
});
exam09.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
color: #333;}
ul {
list-style: none;
}
#container {
padding: 30px 20px;
}
h1 {
font-size: large;
border-left: 10px solid #7BAEB5;
border-bottom: 1px solid #7BAEB5;
padding: 10px;
width: auto;
}
#comment_write {
padding: 20px 15px;
border-bottom: 1px solid #7BAEB5;
}
#comment_write label {
display: inline-block;
width: 80px;
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
#comment_write input[type='text'], #comment_write textarea {
border: 1px solid #ccc;
vertical-align: middle;
padding: 3px 10px;
font-size: 12px;
line-height: 150%;
}
#comment_write textarea {
width: 380px;
height: 90px
}
.comment_item {
font-size: 13px;
color: #333;
padding: 15px;
border-bottom: 1px dotted #ccc;
line-height: 150%;
}
.comment_item .writer {
color: #555;
line-height: 200%;
}
.comment_item .writer input {
vertical-align: middle;
}
.comment_item .writer .name {
color: #222;
font-weight: bold;
font-size: 14px;
}
</style>
</head><body>
<div id="container">
<h1>jQuery Comment</h1>
<div id="comment_write">
<form id="comment_form">
<div>
<label for="user_name">작성자</label>
<input type="text" name="user_name" id="user_name" />
<input type="submit" value="저장하기" />
</div>
<div>
<label for="comment">댓글 내용</label>
<textarea name="comment" id="comment"></textarea> <!-- textarea는 공간을 띄어두면 안된다. -->
</div>
</form>
</div>
<!-- 동적 요소 -->
<ul id="comment_list"></ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
- 유효성 검사하기
$(function () {
$('#comment_form').submit(function(){
if(!$('#user_name').val()){
alert('이름을 입력하세요');
$('#user_name').focus();
return false;
}
if(!$('#comment').val()){
alert('내용을 입력하세요');
$('#comment').focus();
return false;
}
이름과 내용을 입력하지 않으면 알림창 뜨게하고 focus 해줌.
- 날짜 데이터 생성
let date = new Date();
let yy = date.getFullYear();
let mm = date.getMonth()+1;
let dd = date.getDate();
let hh = date.getHours();
let mi = date.getMinutes();
let ss = date.getSeconds();
//한 자릿수일 때 앞에 '0'을 추가하여 두 자릿수로 만드는 것
if(mm < 10)
mm = '0' + mm;
if(dd < 10)
dd = '0' + dd;
if(hh < 10)
hh = '0' + hh;
if(mi < 10)
mi = '0' + mi;
if(ss < 10)
ss = '0' + ss;
var today = yy + '-' + mm + '-' + dd + '' + hh + ':' + mi + ':' + ss;- 태그 생성
//<li class = "comment_item"></li>
var new_li = $('<li/>');
new_li.addClass('comment_item');
//<p class="writer"></p>
var writer_p = $('<p/>');
writer_p.addClass('writer');
//<span class="name">~~~님</span>
var name_span = $('<span/>');
name_span.addClass('name');
name_span.html($('#user_name').val() + '님');
//<span> / 2023-04-03 12:32:15</span>
var date_span = $('<span />');
date_span.html(' / ' + today + ' ');
//<input type="button" value="삭제하기" class="delete_btn">
var del_input = $('<input/>');
del_input.attr({
'type': 'button',
'value': '삭제하기'
});
del_input.addClass('delete_btn');
//<p></p>
var content_p = $('</p>');
content_p.html($('#comment').val());- 화면에 뿌리기 （결합 과정통해서）－ 체인방식
writer_p.append(name_span).append(date_span).append(del_input);
new_li.append(writer_p).append(content_p);
$('#comment_list').append(new_li);- 초기화 과정 （하나 작성하고 submit하게 되면 내용 사라지게 ）
//초기화
$('#user_name').val('');
$('#comment').val('');
return false;
});- 동적처리
- $（조상).on（‘이벤트’, ‘후손’, function(){}）;
//삭제하기
//$('.delete_btn').click(function(){ //submit안에 class=".delete_btn" 이 있다
// alert('ㅋㅋㅋ'); //submit밖에서는 이벤트가 처리되지 않는다
//}); //그래서 "ㅋㅋㅋ"는 출력되지 않는다.
//동적 처리
//$(조상).on('이벤트', '후손')
$(document).on('click', '.delete_btn', function(){
if(confirm('선택하신 항목을 삭제하시겠습니까?')){
$(this).parents('.comment_item').remove();
}
});
});
</script>
</body>
</html>
$(this).remove(); -- 이런식으로 작성하면 안된다.
이유: 삭제하기 버튼을 누르면 삭제하기 버튼을 지우는 것이 아니다.
$(this).parents('.comment_item').remove();
이런식으로 삭제하기 버튼의 부모인 li부분을 찾아서 지워야한다.
li의 class="comment_item"이므로
위와 같이 코드를 작성해야한다.
삭제하기 버튼을 누르면 li부분이 통으로 삭제된 것을 확인할 수 있다.
* load()
읽어오고자 하는 대상의 내용이 단순한 text나 html 태그를 표현하며
읽어온 내용을 특정 요소에 출력하는 것만을 목적으로 할 경우 load() 함수를 사용해 코드를 축약할 수 있다.
$("CSS셀렉터").load(
"읽어올 대상의 URL"
[, function() { ...읽기에 성공한 후 실행될 함수...}]
);
예) "readme.html" 파일의 전체 내용 중에서 "#my"라는 id값을 갖는 요소만을 읽어올 경우
$("출력할 대상의 셀렉터").load("readme.html #my"); -- 띄어쓰기 해주기
common.css
@charset "UTF-8";
html, body {
width: 100%;
height: 100%;
}
h1.title {
font-size: large;
border-left: 10px solid #7BAEB5;
border-bottom: 1px solid #7BAEB5;
padding: 10px;
width: auto;
background-color: #fff;
}
div.exec, div.console {
padding: 20px 15px;
border-bottom: 1px solid #7BAEB5;
}
div.console {
font-family: 'Courier New';
font-size: 12px;
font-style: italic;
line-height: 130%;
}
div.example {
padding: 10px 30px;
}reset.css
@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}exam10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
</head>
<body>
<h1 class="title">동적 드롭다운</h1>
<div class="exec">
<form>
<!-- 각 단계별 dropdown을 표시할 span 태그 -->
<span id="category1"></span>
<span id="category2"></span>
<span id="category3"></span>
</form>
</div>
<div class="console"></div><script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
//1 depth / 1단계 드롭다운 초기화
$('#category1').load('../txt/category-data.html #category1-1', function(){
$(this).show();
});
이 파일만 읽어오는 것이다.
//2 depth / 2단계 드롭다운 업데이트
$(document).on('change', '#category1 > select', function(){
//앞에꺼를 변경하면 뒤에 내용도 다 사라지게 하는 것
$('#category2, .console').empty(); //이전 단계 선택 시 초기화
$('#category3').empty();
var target = $(this).find('option:selected').attr('data-target');// 선택된 옵션의 data-target 속성값 읽기
console.log('target = ' + target);
$('#category2').load('../txt/category-data.html ' + target, function(){
$(this).show(); //선택된 옵션에 따라 2단계 드롭다운 로드
});
});
category의 select 부분이 동적으로 들어옴.
//3 depth / 3단계 드롭다운 업데이트
$(document).on('change', '#category2 > select', function(){
$('#category3, console').empty(); //이전 단계 선택 시 초기화
var target = $(this).find('option:selected').attr('data-target'); //선택된 옵션의 data-target 속성값 읽기
console.log('target = ' + target);
$('#category3').load('../txt/category-data.html ' + target, function(){
$(this).show(); //선택된 옵션에 따라 3단계 드롭다운 로드
});
});
//마지막 선택 / 최종 선택된 값 표시
$(document).on('change', '#category3 > select', function(){
if($(this).find('option:selected').index() > 0){ //유효한 옵션이 선택된 경우
var data1 = $('#category1 > select > option:selected').val();
var data2 = $('#category2 > select > option:selected').val();
var data3 = $('#category3 > select > option:selected').val();
$('.console').html(data1 + ' >' + data2 + ' >' + data3); //선택된 값을 표시
}
});
});
</script>
</body>
</html>
<!-- 1depth 카테고리 -->
<select name="category1" id="category1-1">
<option>----- 선택하세요 -----</option>
<option value="의류" data-target="#category2-1">의류</option>
<option value="디지털/가전" data-target="#category2-2">디지털/가전</option>
</select><!-- 의류에 종속된 2depth 카테고리 -->
<select name="category2" id="category2-1">
<option>----- 선택하세요 -----</option>
<option value="여성의류" data-target="#category2-1-1">여성의류</option>
<option value="남성의류/캐주얼의류" data-target="#category2-1-2">남성의류/캐주얼의류</option>
</select>
<!-- 디지털/가전 2depth 카테고리 -->
<select name="category2" id="category2-2">
<option>----- 선택하세요 -----</option>
<option value="TV/냉장고/세탁기" data-target="#category2-2-1">TV/냉장고/세탁기</option>
<option value="노트북/데스크탑" data-target="#category2-2-2">노트북/데스크탑</option>
</select><!-- 의류 > 여성의류에 종속된 3depth 카테고리 -->
<select name="category3" id="category2-1-1">
<option>----- 선택하세요 -----</option>
<option value="티셔츠">티셔츠</option>
<option value="블라우스/셔츠/남방">블라우스/셔츠/남방</option>
<option value="가디건">가디건</option>
<option value="니트/스웨터">니트/스웨터</option>
</select>
<!-- 의류 > 남성의류/캐주얼의류에 종속된 3depth 카테고리 -->
<select name="category3" id="category2-1-2">
<option>----- 선택하세요 -----</option>
<option value="캐주얼셔츠/남방">캐주얼셔츠/남방</option>
<option value="긴팔티/맨투맨신규코너">긴팔티/맨투맨신규코너</option>
<option value="청바지인기코너">청바지인기코너</option>
<option value="캐주얼 바지/팬츠">캐주얼 바지/팬츠</option>
</select>
<!-- 디지털/가전 > TV/냉장고/세탁기에 종속된 3depth 카테고리 -->
<select name="category3" id="category2-2-1">
<option>----- 선택하세요 -----</option>
<option value="3D TV">3D TV</option>
<option value="김치냉장고">김치냉장고</option>
<option value="드럼세탁기">드럼세탁기</option>
</select>
<!-- 디지털/가전 > 노트북/데스크탑에 종속된 3depth 카테고리 -->
<select name="category3" id="category2-2-2">
<option>----- 선택하세요 -----</option>
<option value="노트북">노트북</option>
<option value="브랜드PC">브랜드PC</option>
<option value="조립PC">조립PC</option>
</select>Dyamic Web Project : jQueryAJax
Folder : 01_helloAJax
AJax ( Asynchronous JavaScript and XML)
=> 비동기
=> 화면 이동 X
common.css
@charset "UTF-8";
html, body {
width: 100%;
height: 100%;
}
h1.title {
font-size: large;
border-left: 10px solid #7BAEB5;
border-bottom: 1px solid #7BAEB5;
padding: 10px;
width: auto;
background-color: #fff;
}
div.exec, div.console {
padding: 20px 15px;
border-bottom: 1px solid #7BAEB5;
}
div.console {
font-family: 'Courier New';
font-size: 12px;
font-style: italic;
line-height: 130%;
}
div.example {
padding: 10px 30px;
}reset.css
@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}$.ajax() 함수를 사용한 텍스트 읽기
text01.txt
AJax jQuery 테스트exam01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 class="title">$.ajax() 함수를 사용한 텍스트 읽기</h1>
<div class="exec">
<input type="button" value="txt파일 가져오기" id="mybtn" />
</div>
<div class="console" id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
jQuery.ajax(); = $.ajax(); 둘이 같은 것 !! 우리는 뒤에꺼 사용한다.
<script type="text/javascript">
$(function () {
$('#mybtn').click(function(){
$.ajax({
type: 'get', //get 방식(주소통해서 데이터 이동 - 눈에 보임)
//or post(데이터는 페이지 단위로 움직여진다.)
url: 'http://localhost:8080/Context명(project명)' //서버에 요청
});
});
});
</script><script type="text/javascript">
$(function () {
$('#mybtn').click(function(){
$.ajax({
type: 'get', //get 방식(주소통해서 데이터 이동 - 눈에 보임)
//or post(데이터는 페이지 단위로 움직여진다.)
url: 'http://localhost:8080/jQueryAJax/text/text01.txt' //서버 요청
});
});
});
</script>
success: 200(ok-제대로 온거), 404, 405, 500(서버에러), 400
text01.txt 파일에서 읽어온 데이터가 data로 들어온다. -- function(data){ }
<script type="text/javascript">
$(function () {
$('#mybtn').click(function(){
$.ajax({
type: 'get', //get 방식(주소통해서 데이터 이동 - 눈에 보임)
//or post(데이터는 페이지 단위로 움직여진다.)
url: 'http://localhost:8080/jQueryAJax/text/text01.txt', //서버 요청
dataType: 'text', //서버로부터 받은 데이터의 자료형 - 'text' or 'xml' or 'json'
success: function(data){
$('#result').html(data);
},
error: function(xhr, textStatus, errorThrown){
$('div').html('<div>' + textStatus + '(HTTP-' + xhr.status + '/' + errorThrown + ')' + '</div>');
}
});
});
});
</script>
버튼 누르면 이동 안 하고 데이터 출력해준다.
주소 좀만 틀려도 에러가 뜬다.
$.ajax() 함수를 사용한 HTML 읽기
text02.txt
<div style="margin-bottom: 10px">
<h1 style="color: red">Ajax를 통해서 다른 파일을 읽어옵니다.</h1>
<h2 style="color: blue">다른 내용은 HTML태그로 구성될 수 도 있습니다.</h2>
<img src="../image/짱구.jpg" width="150" height="150" alt="짱구" />
</div>exam02.html
- $('#result').text(data);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
</head>
<body>
<h1 class="title">$.ajax() 함수를 사용한 HTML 읽기</h1>
<div class="exec">
<input type="button" value="txt파일 가져오기" id="mybtn" />
</div>
<div class="console" id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#mybtn').click(function(){
$.ajax({
type: 'get',
url: '../text/text02.txt',
dataType: 'text',
success: function(data){
$('#result').text(data);
},
error: function(e){
console.log(e);
}
});
});
});
</script>
</body>
</html>$('#result').text(data);
- $('#result').html(data);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
</head>
<body>
<h1 class="title">$.ajax() 함수를 사용한 HTML 읽기</h1>
<div class="exec">
<input type="button" value="txt파일 가져오기" id="mybtn" />
</div>
<div class="console" id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#mybtn').click(function(){
$.ajax({
type: 'get',
url: '../text/text02.txt',
dataType: 'text',
success: function(data){
//$('#result').text(data);
$('#result').html(data);
},
error: function(e){
console.log(e);
}
});
});
});
</script>
</body>
</html>
- $('#result').append(data);
append 하게 되면 계속 추가가 된다 !!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
</head>
<body>
<h1 class="title">$.ajax() 함수를 사용한 HTML 읽기</h1>
<div class="exec">
<input type="button" value="txt파일 가져오기" id="mybtn" />
</div>
<div class="console" id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#mybtn').click(function(){
$.ajax({
type: 'get',
url: '../text/text02.txt',
dataType: 'text',
success: function(data){
//$('#result').text(data);
//$('#result').html(data);
$('#result').append(data);
},
error: function(e){
console.log(e);
}
});
});
});
</script>
</body>
</html>
$.ajax() 함수를 사용한 텍스트 읽기
jsp - java와 html이 목적
<%@ -- page directive
<%@ 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>
</head>
<body>
</body>
</html>java로만 사용하려면
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//Java
%>url: '../text/textdata.jsp?변수=값&변수=값',
data: '변수=값&변수=값' //서버로 보내는 데이터
data: {변수: 값, 변수: 값}, //JSON 형식
<script type="text/javascript">
$(function () {
$('#mybtn').click(function(){
$.ajax({
type: 'get',
url: '../text/textdata.jsp',
//data: 'keyword=Hello AJax!!', //서버로 보내는 데이터(공백써도됨.)
data: {'keyword': 'Hello AJax!!'}, //JSON 형식
dataType: 'text',
success: function(data){
$('#result').html(data);
},
error: function(e){
console.log(e);
}
});
});
});
</script>
url통해서 데이터를 넘겨준다. textdata.jsp가 받아야한다.
클라이언트로 프로그램을 짠다. html, css, js로 짜고 서버에 요청을 한다.
서버는 요청을 받는다. 받고나서 응답을 해줘야한다.
서버는 받아서 응답하고, 받아서 응답해야된다.
요청하는걸 받아줘서 처리하는 객체가 request이다.
나한테 오는 걸 받아주는게 request
그 응답을 처리하는게 response
request(요청) / response(응답)
keyword= "hello AJax"하고 요청하면 request가 받는다.
거기에대한 대답을 해주는 것은 response이다.
textdata.jsp
request.getParameter("이름")
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//Java
String result = request.getParameter("keyword"); //요청을 받음. (Hello AJax!!가 담겨진다.)
%>
결과 = <%=result %> <!-- result값을 찍어라 -->
jsp 주석 <%-- --%>
keyword라는 이름으로 파라매터를 보내주면 받는다.
파람이라는 내장객체를 통해들어오는 keyword 값을 가져와서 찍어라
=> ${ param.keyword }
<%
//Java
String result = request.getParameter("keyword"); //요청을 받음. (Hello AJax!!가 담겨진다.)
%>
결과 = <%=result %>${ param.keyword }; <%-- EL / JSTL --%>
두 개 다 똑같은 결과가 나온다.
Folder : 02_xml
$.ajax() 함수를 사용한 XML 데이터 읽기 (1)
xml01.xml
<?xml version="1.0" encoding="UTF-8"?>
<school>
<subject>
<title>Javascript+jQuery+Ajax</title>
<time>매주 월/수/금 오후 7시00분~10시00분</time>
<teacher>홍길동</teacher>
</subject>
</school>exam01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
</head>
<body>
<h1 class="title">$.ajax() 함수를 사용한 XML 데이터 읽기 (1)</h1>
<div class="exec">
<input type="button" value="XML 데이터 가져오기" id="mybtn" />
</div>
<div class="console" id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#mybtn').click(function(){
$.ajax({
type: 'get',
url: '../xml/xml01.xml',
dataType: 'xml', //'text' or 'xml' or 'json'
success: function(data){
console.log(data);
},
error: function(e){{
console.log(e);
}}
});
});
});
</script>
</body>
</html>그냥 문자열로 내가 받은거 들고온다.
jQuery 객체값으로 가지고 들어온다. (위에와 다르게 들어온다.)
success: function(data){
//console.log(data);
console.log($(data));
},
SCHOOL
SUBJECT
TITLE TIME TEACHER
xml 파일에서 데이터 받아오기
let title = data.find('title').text();
let time = data.find('time').text();
let teacher = data.fine('teacher').text(); let div = $('<div/>');
let p1 = $('<p/>').html(title);
let p2 = $('<p/>').html(time);
let p3 = $('<p/>').html(teacher);
div.append(p1).append(p2).append(p3);
//id="result"에 붙이기
$('#result').html(div);
왜 $(data)를 사용해야 하는가?
- jQuery 메서드를 사용하기 위해: jQuery 객체로 변환해야만 find, text와 같은 jQuery 메서드를 사용할 수 있다. 예를 들어, XML 데이터에서 특정 태그를 찾고, 그 내용을 가져오는 작업은 $(data).find('title').text();와 같이 jQuery 메서드를 통해 간단히 수행할 수 있다.
$.ajax() 함수를 사용한 XML 데이터 읽기 (2)
xml02.xml - school이 3개이므로 배열로 잡아서 for문 돌려야되는거 캐치 !!
<?xml version="1.0" encoding="UTF-8"?>
<school>
<subject>
<title>Javascript+jQuery+Ajax</title>
<time>매주 월/수/금 오후 7시00분~10시00분</time>
<teacher>홍길동</teacher>
</subject>
<subject>
<title>HTML5+CSS3 기반의 반응형 웹</title>
<time>매주 화/목 오후 7시00분~10시00분</time>
<teacher>라이언</teacher>
</subject>
<subject>
<title>Java 입문에서 활용까지</title>
<time>매주 화/목 오후 7시00분~10시00분</time>
<teacher>코난</teacher>
</subject>
</school>exam02.html
subject 찾기
success: function(data){
let subject = $(data).find('subject');
console.log(subject.length);//3
},=> 배열로 들어오게 된다.
=> 3개가 찍히는 것을 확인할 수 있다.
console.log(subject.children().length);//9
=> 9개가 찍히는 것을 확인할 수 있다.
console.log(subject.eq(0).find('teacher').text());//홍길동
=> 홍길동이 찍히는 것을 확인할 수 있다.
- 방법1
//for(let i=0; i<subject.length; i++)
subject.each(function(){ //3번 반복
let title = $(this).find('title').text();
let time = $(this).find('time').text();
let teacher = $(this).find('teacher').text();
let div = $('<div/>');
let p1 = $('<p/>').html(title);
let p2 = $('<p/>').html(time);
let p3 = $('<p/>').html(teacher);
div.append(p1).append(p2).append(p3);
//id="result"에 붙이기
$('#result').append(div).append('<hr/>');
}); //each- 방법2 (이거 더 추천 ★)
//for(let i=0; i<subject.length; i++)
subject.each(function(){ //3번 반복
let title = $(this).find('title').text();
let time = $(this).find('time').text();
let teacher = $(this).find('teacher').text();
let div = `<div>`;
div += `<p>` + title + `</p>`;
div += `<p>` + time + `</p>`;
div += `<p>` + teacher + `</p>`;
div += `</div>`;
$('#result').append(div).append('<hr/>');
}); //each
밑에께 좀 더 가독성이 좋긴하다.
//for(let i=0; i<subject.length; i++)
subject.each(function(){ //3번 반복(subject 요소마다 반복)
let title = $(this).find('title').text();
let time = $(this).find('time').text();
let teacher = $(this).find('teacher').text();
let div = `
<div>
<p>${title}</p>
<p>${time}</p>
<p>${teacher}</p>
</div>`;
// 결과를 id="result"인 요소에 추가
$('#result').append(div).append('<hr/>');
}); //eacha
'HTML CSS JS' 카테고리의 다른 글
| DAY 41 - JSON / Bootstrap (2024.08.29) (0) | 2024.08.29 |
|---|---|
| DAY 40 - jQueryAJax (2024.08.28) (3) | 2024.08.28 |
| DAY 38 - jQuery (2024.08.26) (0) | 2024.08.26 |
| DAY 37 - jQuery (2024.08.23) (0) | 2024.08.23 |
| DAY 36 - jQuery (2024.08.22) (0) | 2024.08.22 |
