티스토리 뷰
1. $.ajax( ) 메소드 (*****)
- $.ajax ( {
- 1 ) url : “ 전송페이지 ( 데이터 전송 및 요청할 외부 주소를 의미 ) “,
- 2 ) type : “ 전송 방식 ( get / post 방식 ) “,
- 3 ) data : “ 전송할 데이터 “,
- 4 ) dataType : “ 요청한 데이터 형식 ( 전송받을 데이터 형식, data와 다르다. ) “,
- 5 ) success : function(data) { ( 전송에 성공했을 때의 코드 ) },
- 6 ) error : function( ) { ( 전송에 실패했을 때의 코드 ) }
- } );
- + dataType은 서버에서 받아올 데이터 형식을 지정하는 것으로, 데이터가 HTML일 경우에는 “html”, XML일 경우에는 “xml”으로, JSON일 경우에는 “json”으로 입력한다.
[ 1. 위임 방식의 이벤트 핸들러 - delegate / one ] (*)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// 위임방식의 이벤트 핸들러 등록
$(".btn_wrap").delegate(".btn_1.on", "mouseover focus", function(){
alert("HELLO!");
}); // delegate
$(".btn_1").addClass("on"); // 동적으로 class 속성값 on 추가
// 위임방식의 그룹이벤트 핸들러 등록이나 1회성 처리
$(document).one("mouseover focus", ".btn_2.on", function(){
alert("WELCOME!");
}); // onmouseover & ofocus : .btn2 요소노드의 class=on 속성일때 이벤트 핸들러 작동
// one일때는 딱 1번만 실행되고, 실행되지 않는다.
$(".btn_2").addClass("on");
}); //.jq
</script>
</head>
<body>
<div class="btn_wrap">
<p><button class="btn_1">버튼1</button></p>
<p><button class="btn_2">버튼2</button></p>
</div>
</body>
</html>[ 2. load( ) 메소드 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>load메소드</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// (method) JQuery.load(
// url: string,
// data?: string | Object,
// complete?: (responseText: string,
// textStatus: string,
// XMLHttpRequest: XMLHttpRequest) => any
// ): JQuery (+2 overloads)
// + ?가 붙은 것은 선택사항이지 필수가 아니다.
$("#newsWrap_1").load("jquery_ajax_news.html #news_1");
$("#newsWrap_2").load("jquery_ajax_news.html #news_2");
// jquery_ajax_news.html에서 #news_1과 #news_2를 달라는 것이다.
// #news_1는 id가 news_1인 요소만 가지고 오라는 의미이다.
$("#newsWrap_3").load("jquery_ajax_news.html #hl");
}); // .jq
</script>
</head>
<body>
<h1>LOAD1</h1>
<div id="newsWrap_1"></div>
<h1>LOAD2</h1>
<div id="newsWrap_2"></div>
<h1>LOAD3</h1>
<div id="newsWrap_3"></div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax - load 연습</title>
</head>
<body>
<p id="news_1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea cum velit dolorum.</p>
<p id="news_2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas beatae, unde excepturi quaerat
nemo blanditiis qui placeat dolor corrupti dolores soluta fuga ad? Rerum, illo natus? Voluptatibus consectetur,
sed dicta voluptates culpa hic delectus, ea architecto ducimus iusto commodi sint, ipsam quos eius vitae quod rem totam eum facere neque! Suscipit,
magni dolores. Aspernatur quae reiciendis soluta tempora fugit magnam distinctio nemo praesentium iure dolores voluptate iusto, sapiente nesciunt error
quas amet necessitatibus facilis voluptatum sunt qui quos quidem. Nostrum doloremque consectetur non minus consequatur possimus earum aliquid. Accusamus
quasi recusandae nemo, alias nesciunt porro culpa tempora veritatis ut repudiandae.</p>
<div id="hl">HELLO!!</div>
</body>
</html>[ 3. $.ajax ( ) 메소드 ] (*****)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>$.ajax( ) 메소드(*****)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function () {
console.clear();
// $.ajax() 제이쿼리 메소드로, 상세하게 비동기호출을 수행하고
// 비동기로 받아온 데이터를 이용해서, 현재 문서의 DOM tree에 반영하자
$.ajax({
url: "json/MOCK_DATA.json", // 1. 이 데이터를 달라
// /는 루트파일을 의미한다.
// url : "http://localhost:8080/js/MOCK_DATA.json",
dataType: "json", // 2.이 데이터 타입을 받음
// 웹 서버에서 요구한 자원(파일)을 잘 받았다면,
// 아래의 success 메소드가 callback된다.
success: function (data) {
console.debug(`success (data) invoked.`);
console.log(data);
if( data.length > 0 ){ // 데이터가 있으면, 실행
var tb = $("<table>");
console.log('+ tb :', tb);
// ==============================================
for( let member of data ){
let id = member.id;
let firstName = member.first_name;
let lastName = member.last_name;
let email = member.email;
let gender = member.gender;
console.log(`>>> ${id}, ${firstName}, ${lastName}, ${email}, ${gender}`);
// ==============================================
// 멤버를 테이블의 한 행에 추가하기
let row = $("<tr>").append(
$("<td>").text(id),
$("<td>").text(firstName),
$("<td>").text(lastName),
$("<td>").text(email),
$("<td>").text(gender)
); // .append
// (method) JQuery.append(content1: string | any[] | JQuery | Element | DocumentFragment | Text, ...content2: any[]): JQuery (+1 overload)
// .append는 한번에 여러개를 넣을 수 있다.
// ==============================================
tb.append(row);
} // for of는 각 원소의 멤버를 얻어온다.
// for in : 인덱스 번호를 하나씩 빼온다.
$(".container").append(tb);
} // if
} // success
}); // $.ajax
}); //.jq
</script>
</head>
<body>
<h1>$.ajax( ) 메소드 연습</h1>
<hr />
<div class="container"></div>
</body>
</html>[ 4. $.ajax ( ) 메소드 2 ] (*****)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>$.ajax( ) 메소드2(*****)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function () {
console.clear();
// $.ajax() 제이쿼리 메소드로, 상세하게 비동기호출을 수행하고
// 비동기로 받아온 데이터를 이용해서, 현재 문서의 DOM tree에 반영하자
$.ajax({
url: "json/MOCK_DATA.json", // 1. 이 데이터를 달라
// /는 루트파일을 의미한다.
// url : "http://localhost:8080/js/MOCK_DATA.json",
// ==============================================
dataType: "json", // 2.이 데이터 타입을 받음
// ==============================================
// 웹 서버에서 요구한 자원(파일)을 잘 받았다면,
// 아래의 success 메소드가 callback된다.
success: function (data) {
console.debug(`success (data) invoked.`);
console.log(data);
// ==============================================
if( data.length > 0 ){ // 데이터가 있으면, 실행
var tb = $("<table>");
console.log('+ tb :', tb);
tb.attr({border : "1px solid black", paddingLeft : "10px" } );
tb.css({ border : "1px solid black", borderCollapse: "collapse", paddingLeft : "10px" });
// ==============================================
$(data).each(function(){
// 멤버를 테이블의 한 행에 추가하기
let row = $("<tr>").append(
$("<td>").text(this.id),
$("<td>").text(this.first_name),
$("<td>").text(this.last_name),
$("<td>").text(this.email),
$("<td>").text(this.gender)
); // .append
// (method) JQuery.append(content1: string | any[] | JQuery | Element | DocumentFragment | Text, ...content2: any[]): JQuery (+1 overload)
// .append는 한번에 여러개를 넣을 수 있다.
// ==============================================
tb.append(row);
});
// ==============================================
$(".container").append(tb);
} // if
} // success
}); // $.ajax
}); //.jq
</script>
</head>
<body>
<h1>$.ajax( ) 메소드 연습</h1>
<hr />
<div class="container"></div>
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 77일차 - XHR / ajax 메소드 (*****) (0) | 2022.06.18 |
|---|---|
| KH 76일차 - ajax( ) 메소드 (******) (0) | 2022.06.16 |
| KH 74일차 - 제이쿼리 ( 이벤트 메소드 ) (***) (0) | 2022.06.14 |
| KH 73일차 - 제이쿼리 ( 이벤트 메소드 ) (***) (0) | 2022.06.13 |
| KH 72일차 - 제이쿼리 ( 객체 편집 메소드 ) (****) (0) | 2022.06.10 |
댓글