首页使用axios 请求接口将数据渲染到页面上

使用axios 请求接口将数据渲染到页面上

时间: 2023-12-06 15:39:49 浏览: 150

好的，以下是一个使用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地址。

阅读全文