jsonplacehoder의 fetch를 사용하여
ajax 통신으로 데이터를 요청하여
화면에 출력해 보겠습니다.
ajax 통신으로 데이터를 요청하여
화면에 출력해 보겠습니다.
구현내용
· fetch API 이용하여 ajax 통신으로 user 정보 가져오기
· 자바스크립트를 이용하여 버튼 클릭시 name, email 화면에 출력
· fetch API 이용하여 ajax 통신으로 user 정보 가져오기
· 자바스크립트를 이용하여 버튼 클릭시 name, email 화면에 출력
평소에 데이터 서버 기능 구현을 위해서 테스트용으로 많이 사용하는
JSONPlaceholder 사용법을 알아보겠니다.
사이트 이동
https://jsonplaceholder.typicode.com/
JSONPlaceholder - Fake online REST API for testing and prototyping
When to use JSONPlaceholder is a free online REST API that you can use whenever you need some fake data. It can be in a README on GitHub, for a demo on CodeSandbox, in code examples on Stack Overflow, ...or simply to test things locally. Resources JSONPlac
jsonplaceholder.typicode.com
JSONPlaceholder 첫페이지의 resources와 routes부분을 이용하여,
가상의 서버 통신 기능을 구현해 볼 수 있습니다.
화면 결과
fetch 사용방법
fetch( URL, 설정 ).then( callback함수 ).catch( callback함수 )
html 문서 내 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button type="submit" onClick="getUser()">click</button>
<div id="userBox"></div>
<script>
function getUser() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => {
// 응답을 JSON 형태로 파싱
return res.json();
})
.then(data => {
// json 출력
//div 태그 생성
const info = document.createElement("div");
//태그안 정보 할당
//map함수를 이용하여 info에 모든 user의 name, email 정보를 할당
info.textContent = data.map((item) => item.name + item.email);
//생성된 info, div태그를 <div id="userBox"></div> 안에 삽입
userBox.appendChild(info);
})
.catch(err => {
// error 처리
console.log('Fetch Error', err);
});
}
</script>
</body>
</html>
반응형
'💻CODING > javascript' 카테고리의 다른 글
| [js] 자바스크립트로 구구단 구현하기(순수 자바스크립트/ vue.js) (0) | 2020.12.12 |
|---|---|
| [js] 자바스크립트로 검색 기능 구현하기 (9) | 2020.12.07 |
| [js] 자바스크립트 map(), filter() 사용법(ft. 배열) (0) | 2020.12.03 |
| [js/jQuery] input 값의 데이터를 ajax json 형식으로 전송 (ft. 이벤트페이지 ) (0) | 2020.10.19 |
| [js] 클릭 이벤트 후 이미지 변경, 컬러 변경, 팝업창 오픈 (0) | 2020.10.15 |
댓글