<!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>
</head>
<body>
<script src="d.js"></script>
<div id="root">
</div>
</body>
</html
async function getData() {
const url = 'http://jsonplaceholder.typicode.com/posts'
const response = await fetch(url)
console.log(response)
const posts = await response.json()
console.log(posts)
const root = document.querySelector('#root')
const ul = document.createElement('ul')
posts.forEach(post => {
const li = document.createElement('li')
const a = document.createElement('a')
a.appendChild(document.createTextNode(post.title))
a.setAttribute('href', `${url}/${post.id}`)
li.appendChild(a)
ul.appendChild(li)
})
root.appendChild(ul)
}
getData()
<!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>
</head>
<body>
<button>btn</button>
<img>
<script>
const url = 'https://dog.ceo/api/breeds/image/random'
// const promise = fetch(url)
console.log(promise)
// promise.then(response => {
// console.log(response instanceof Response)
// console.log(response)
// console.log(response.body)
// // console.log(response.json())
// return response.json()
// }).then(data => console.log(data))
const button = document.querySelector('button')
const img = document.querySelector('img')
button.addEventListener('click', () => {
fetch(url)
.then(response => {
console.log('response:', response)
if(response.ok) {
return response.json()
}
throw new Error('error!')
})
.then(data => img.src = data.message)
})
</script>
</body>
</html>
<!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>
</head>
<body>
<button>btn</button>
<input type="text" placeholder="name">
<script>
const button = document.querySelector('button')
const input = document.querySelector('input')
button.addEventListener('click', () => {
fetch('http://jsonplaceholder.typicode.com/users', {
method: 'post',
body: JSON.stringify({ name: input.value }),
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
if(response.ok) {
return response.json()
}
throw new SyntaxError('error!')
}).then(data => console.log(data))
}
)
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律