使用axios 请求接口将数据渲染到页面上
时间: 2023-12-06 20:39:49 浏览: 143
vue异步axios获取的数据渲染到页面的方法
5星 · 资源好评率100%
好的,以下是一个使用axios请求接口并将数据渲染到页面上的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用axios请求接口并渲染数据到页面</title>
</head>
<body>
<ul id="list"></ul>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 发送GET请求获取数据
axios.get('https://jsonplaceholder.typicode.com/users')
.then(function (response) {
// 处理响应数据
var data = response.data;
var list = document.getElementById('list');
// 渲染数据到页面
data.forEach(function (item) {
var li = document.createElement('li');
li.textContent = item.name;
list.appendChild(li);
});
})
.catch(function (error) {
console.log(error);
});
</script>
</body>
</html>
```
在示例中,我们使用了axios库发送一个GET请求获取数据,然后将获取到的数据渲染到页面中的一个无序列表中。需要注意的是,在此示例中我们使用了一个示例API,你可以将其替换为你自己的API地址。
阅读全文