1. 서버 설정 및 업로드는 아래 링크 참조
2. 아래 사이트 방문해서 JSON, XML 파일 받기
임의의 정보가 담긴 Mock Data를 원하는 포맷으로 만들어주는 곳
3. 다운로드 한 Mock Data와 아래의 html 파일 업로드
4. jq_1_ajax.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 제이쿼리 </title>
<script src="js/jquery.min.js"></script>
<script>
/*
js/MOCK_DATA.json 데이터를 가져옴
데이터를 받아오면
success:function(data)
function 함수의 매개변수 data에
json 데이터 1000개가 들어오고
이를 테이블 태그로 정렬
*/
$(function() {
$.ajax({
url:"js/MOCK_DATA.json",
dataType:"json",
success:function(data) {
if (data.length > 0) {
var tb = $("<table />");
for (var i in data) {
var $id = data[i].id;
var $first_name = data[i].first_name;
var $last_name = data[i].last_name;
var $email = data[i].email;
var $gender = data[i].gender;
var row = $("<tr />").append(
$("<td />").text($id),
$("<td />").text($first_name),
$("<td />").text($last_name),
$("<td />").text($email),
$("<td />").text($gender)
);
tb.append(row);
}
$(".wrap").append(tb);
}
}
});
});
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
5. jq_2_xml.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 제이쿼리 </title>
<script src="js/jquery.min.js"></script>
<script>
/*
each 메소드가 반복문의 역할
i는 인덱스
o는 데이터 (object)
*/
$(function() {
$.ajax({
url:"js/dataset.xml",
dataType:"xml",
success:function(data) {
var $data = $(data).find("record");
if ($data.length > 0) {
var tb = $("<table />");
$.each($data, function(i, o) {
var $id = $(o).find("id").text();
var $first_name = $(o).find("first_name").text();
var $last_name = $(o).find("last_name").text();
var $email = $(o).find("email").text();
var $gender = $(o).find("gender").text();
var row = $("<tr />").append(
$("<td />").text($id),
$("<td />").text($first_name),
$("<td />").text($last_name),
$("<td />").text($email),
$("<td />").text($gender)
);
tb.append(row);
});
$(".wrap").append(tb);
}
}
});
});
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
'제이쿼리' 카테고리의 다른 글
| [제이쿼리] draggable() (0) | 2020.08.13 |
|---|---|
| [제이쿼리] datepicker() (0) | 2020.08.13 |
| [제이쿼리] load() 메소드 사용하여 다른 html의 값 가져오기 (0) | 2020.08.13 |
| [제이쿼리] JSON 값 사용하기 (0) | 2020.08.13 |
| [제이쿼리] one(), select(), after(), triggerHandler() (0) | 2020.08.12 |
