1. https://luckyguystory.tistory.com/205를 푸시오.
▼정답
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="./jquery-3.2.1.min.js"></script>
<script>
//번호, 이름, 전화번호, 주소, 사진, 삭제
//no, name, tel, address, photo
$(document).ready(function () {
$.ajax({
type: "get",
url: "http://sample.bmaster.kro.kr/contacts?pageno=3&pagesize=10",
success: (data) => {
let table = "<table border='1'>";
for (i = -1; i < data.contacts.length; i++) {
if (i == -1) {
table += "<tr>";
table += "<th>번호</th>";
table += "<th>이름</th>";
table += "<th>전화번호</th>";
table += "<th>주소</th>";
table += "<th>사진</th>";
table += "<th>삭제</th>";
table += "</tr>";
} else {
table += "<tr>";
for (key in data.contacts[i]) {
table += "<td>";
if (key == "photo") {
table +=
'<img width="100px" src="' + data.contacts[i][key] + '">';
} else {
table += data.contacts[i][key];
table += "</td>";
}
}
table +=
"<td><button onclick='deleteContact(this)'>삭제</button></td></tr>";
}
}
table += "</table>";
document.write(table);
},
});
});
function deleteContact(obj) {
console.log(obj);
obj.parentElement.parentElement.remove();
}
</script>
</head>
<body></body>
</html>2. json이란?
▼정답
현업에서 json으로 통신함 | 데이터 형식이 표준회된 것
java와 javascript의 언어가 다르기에 json으로 작성하여 보낸다 → 자동으로 변환됨3. ajax에 대하여 설명하시오.
4. 클릭 시 아래가 복사되도록 하시오
▼정답
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="./jquery-3.2.1.min.js"></script>
<!-- <script>
$(document).ready(function () {
$(document).on("click", "#eDiv", function () {
$(this).clone().appendTo("body");
});
});
</script> -->
<script>
$(document).ready(function () {
$("#eDiv").click(function () {
$(this).clone(true).appendTo("body");
});
});
</script>
<style>
#eDiv {
width: 100px;
height: 100px;
background: #ff0000;
line-height: 100px;
text-align: center;
color: #ffffff;
font-weight: bolder;
margin: 20px;
}
</style>
</head>
<body>
<div id="eDiv">jQuery Event</div>
</body>
</html>