[JavaScript] AJAX
2024. 10. 10. 16:55ㆍJavaScript
다른 웹서버의 데이터를 이용해서 원하는 형식으로
데이터를 한 번 출력해보자.
script 코드드 vscode로 작성할 거다.
이미지 출력
<style>
#root {
max-width: 1200px;
display: flex;
flex-flow: wrap;
margin: 20px auto;
}
.item {
width: 45%;
display: flex;
border: 1px solid black;
margin: 10px;
padding: 10px;
}
.item img {
margin-right: 10px;
}
</style>
</head>
<body>
<h1>AJAX 화면 구현</h1>
<hr>
<div id="root"></div>
<script>
// fetch(콜백형태, 함수 내부에)
const url = "https://jsonplaceholder.typicode.com/photos";
fetch(url) // 주소로 요청한다
.then(resp => resp.json()) // 요청에 따른 응답이 오면, 응답을 json 으로 변환
.then(json => { // json 을 이용하여 다음 내용을 수행
console.log(json);
const arr = json.slice(0, 50).map(e => {
delete e.url
return e
})
console.log(arr)
const root = document.getElementById('root')
arr.forEach(dto => {
let tag = ''
tag += `<div class="item">`
tag += ` <div class="thumbnailUrl"><img src="${dto.thumbnailUrl}"></div>`
tag += ` <div>`
tag += ` <div class="title">${dto.title}</div>`
tag += ` <div class="id">${dto.id}</div>`
tag += ` <div class="albumId>${dto.albumId}</div>`
tag += ` </div>`
tag += `</div>`
root.innerHTML += tag
})
// fetch.then() 함수의 콜백에는 반환을 수행하지 않는다
// 만약, async / await 를 사용하면 반환을 수행할 수 있다
});
</script>
</body>
</html>
결과는 위와 같이 나올 것이다.
style에는 .item에 width를 사용하여, 한 줄ㅇ 나오는 요소의 개수를 정해 줄 수 있다.
전체 목록 출력 (페이징)
<style>
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
table {
border-collapse: collapse;
margin: auto;
}
thead {
background-color: grey;
color: white;
}
tr {
border-bottom: 1px solid grey;
}
td,th {
padding: 5px 10px;
}
</style>
</head>
<body>
<h1>posts</h1>
<hr>
<div id="root">
<table>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!--
HTTP 요청 메서드
GET : select 요청할때 메서드를 지정하지 않으면 기본값은 get
POST : insert
PUT/PATCH : update
DELETE : delete
-->
<script>
// 다른 서버에있는 데이터를 가져오기 위해 주소를 넣음
const url = 'https://jsonplaceholder.typicode.com/posts'
fetch(url)
.then(resp => resp.json())
.then(json => {
// console.log(json) 항상 fetch 하고 나서 출력해보기!!
// (내가 가져온 데이터가 무엇인지 알아야 다듬을 수 있음 )
// tbody 에 innerHTML 넣어주는 것이 정석임
const tbody = document.querySelector('#root > table > tbody')
const arr = json.toSorted((a, b) => b.id - a.id) // 정수반환으로 정렬하기
.slice(0, 20) // slice 로 페이징
arr.forEach(dto => {
let tag = ''
tag += `<tr>`
tag += ` <td>${dto.id}</td>`
// 12_post.html?id=${dto.id} : 이때 id 를 같이 넘긴다
tag += ` <td><a href="12_post.html?id=${dto.id}">${dto.title}</a></td>`
tag += `</tr>`
tbody.innerHTML += tag
})
})
</script>
</body>
</html>
개별 출력
전체 목록 중에서 하나를 선택하면 (a태그를 이용하여 페이지 이동)
이때, id를 받아와서 개별로 출력한다.
<style>
table {
border: 2px solid black;
border-collapse: collapse;
margin: 10px 0;
}
td, th {
padding: 5px 10px;
}
tr {
border-bottom: 1px solid grey;
}
</style>
</head>
<body>
<h1>post.html</h1>
<hr>
<table>
<tr>
<td class="id"></td>
<td class="title"></td>
</tr>
<tr>
<td class="userId" colspan="2"></td>
</tr>
<tr>
<td colspan="2"><pre class="body"></pre></td>
</tr>
</table>
<div style="display: flex; justify-content: space-between;">
<div>
<a href="11_post.html"><button>목록</button></a>
</div>
<div></div>
</div>
<script>
// 자바스크립트에서 쿼리스트링 가져오기
const id = new URLSearchParams(location.search).get('id') // 위에서 생성한 id 를
const url = `https://jsonplaceholder.typicode.com/posts/${id}` // 쿼리스트링 자리에 넣기
// console.log(url)
// async / await 를 활용하여 json 을 반환값으로 받기
// 비동기 함수를 정의할때 async
// 비동기 함수를 호출할때 await : 주소로 요청을 하고 응답을 받으면 그 응답을 json 객체로 바꿈 (콘솔로그가 안뜬다)
// 단, await 호출은 javascript 코드의 top-level 에서 호출할 수 없음(그래서, loadHandler() 를 만든 이유)
async function loadHandler() {
const json = await fetch(url)
.then(resp => resp.json())
console.log(json)
// json 객체의 변수(필드) 이름과
// HTML element 의 클래스 이름을 맞춰두고 하나씩 대입
for(let key in json) { // key 는 index 역할, index에 접근하려면 for 문의 in 을 사용
console.log(key)
const value = json[key]
const element = document.querySelector('.' + key) // 앞에 . 붙이면 class로 불러옴
element.innerText = value
}
// 불러온 json 객체에서 userId 를 불러와서 username을 작성자 위치에 덮어쓰기
const username = await fetch('https://jsonplaceholder.typicode.com/users/' + json.userId)
.then(resp => resp.json())
.then(json => json.username)
document.querySelector('.userId').innerText = username
}
window.onload = loadHandler
</script>
</body>
</html>
아직까지는 비동기 함수에 대해서 잘 모르겠다.
수업에서 배운 내용으로 계속 한 번씩 사용해보면서 사용법을 익혀봐야 될 것 같다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] hidden 활용 (1) | 2024.10.11 |
|---|---|
| [JavaScript] json 화면 구현 (0) | 2024.10.10 |
| [JavaScript] Search Filter (0) | 2024.10.10 |
| [JavaScript] ClickEvent (0) | 2024.10.10 |
| [JavaScript] 정렬 (7) | 2024.10.09 |