Created
December 14, 2023 23:56
-
-
Save ianychoi/d1a1488e47b46670d51e60e9068c7901 to your computer and use it in GitHub Desktop.
Simple HTML with fetch() example with https://koreanjson.com/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Fetch API test with KoreanJSON</title> | |
| <meta charset="utf-8" /> | |
| </head> | |
| <body> | |
| <h1>KoreanJSON - Post</h1> | |
| <form> | |
| Post ID: | |
| <input type="text" id="postid" value="1" /> | |
| <button type="button" onclick="doAction()">Get Post</button> | |
| </form> | |
| <ul id="post"> | |
| </ul> | |
| <script> | |
| function doAction(){ | |
| alert('시작'); | |
| const ul = document.getElementById('post'); | |
| const list = document.createDocumentFragment(); | |
| const postid = document.getElementById('postid').value; | |
| const url = 'https://koreanjson.com/posts/' + postid; | |
| fetch(url) | |
| .then((response) => { | |
| console.log("통신 시작"); | |
| return response.json(); | |
| }) | |
| .then((data) => { | |
| console.log(data); | |
| let li = document.createElement('li'); | |
| let postid = document.createElement('h4'); | |
| let title = document.createElement('h5'); | |
| let content = document.createElement('span'); | |
| postid.innerHTML = `${data.id}`; | |
| title.innerHTML = `${data.title}`; | |
| content.innerHTML = `${data.content}`; | |
| li.appendChild(postid); | |
| li.appendChild(title); | |
| li.appendChild(content); | |
| list.appendChild(li); | |
| ul.appendChild(list); | |
| }) | |
| .catch(function(error) { | |
| console.log(error); | |
| }); | |
| ul.appendChild(list); | |
| console.log('종료'); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment