使用axios获取数据,并以表格的形式显示 ,获取数据的网址:http://116.62.31.170/nbjb/job_getJobList.action?page=1&rows=2
时间: 2024-01-27 15:06:19 浏览: 63
好的,针对您的问题,我可以为您提供一些代码示例,以便您使用 axios 获取数据,并以表格的形式显示。代码示例如下:
```javascript
// 引入 axios 库
const axios = require('axios');
// 定义获取数据的url
const apiUrl = 'http://116.62.31.170/nbjb/job_getJobList.action?page=1';
// 使用 axios 发送 GET 请求获取数据
axios.get(apiUrl)
.then(response => {
// 将返回的数据转换为JSON格式
const data = response.data;
// 在控制台打印获取到的数据
console.log(data);
// 创建表格
const table = document.createElement('table');
const tbody = document.createElement('tbody');
// 创建表头
const thead = document.createElement('thead');
const row = document.createElement('tr');
const th1 = document.createElement('th');
const th2 = document.createElement('th');
th1.appendChild(document.createTextNode('职位名称'));
th2.appendChild(document.createTextNode('薪资'));
row.appendChild(th1);
row.appendChild(th2);
thead.appendChild(row);
table.appendChild(thead);
// 添加表格内容
for (let i = 0; i < data.length; i++) {
const job = data[i];
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = document.createElement('td');
td1.appendChild(document.createTextNode(job.name));
td2.appendChild(document.createTextNode(job.salary));
tr.appendChild(td1);
tr.appendChild(td2);
tbody.appendChild(tr);
}
// 将表格添加到页面中
table.appendChild(tbody);
document.body.appendChild(table);
})
.catch(error => {
console.log(error);
});
```
该示例代码将发送一个 GET 请求到指定的 API URL,获取职位信息数据。然后,将该数据转换为 JSON 格式,创建一个 HTML 表格,并在表格中显示数据。请注意,该代码示例仅供参考,您可以根据您的特定需求进行修改或更改。
阅读全文