通过axios发送get请求,将拿到的猫咪id和猫咪图片(将大小设置为100px*100px)显示出来(如图1所示,每行3张图片),猫咪图片是一个连接,单击猫咪图片后,能在新的标签页显示猫咪图片大图(如图2所示)。 请求地址:https://api.thecatapi.com/v1/images/search?limit=2 说明:“limit=”后面的数字是在输入框输入的,可以是任意数字。最终会随机返回猫咪数据。
时间: 2023-06-07 21:09:45 浏览: 94
使用axios发送post请求,将JSON数据改为form类型的示例
5星 · 资源好评率100%
好的,这是一个关于使用axios发送get请求的问题,我可以帮您解答。
首先,您需要在页面中引入axios库,可以通过CDN地址引入,也可以直接下载axios文件放在您的项目中并引入。接着,您可以编写如下代码来发送get请求获取猫咪数据:
```javascript
axios.get('https://api.thecatapi.com/v1/images/search', {
params: {
limit: 2 // 此处的2可以替换为您输入框中的数字
}
}).then(res => {
// 在这里处理获取到的猫咪数据
}).catch(err => {
console.error(err)
})
```
其中,`params`部分是可选的,用来设置发送get请求时的URL参数。在此处,我们设置了`limit`参数为2,以随机返回2条猫咪数据。
接下来,您可以在`then`回调函数中处理获取到的猫咪数据,通过DOM操作将猫咪图片显示在页面上。比如,可以通过如下代码将猫咪图片显示在一个id为`cat-container`的元素中:
```javascript
const catContainer = document.getElementById('cat-container')
res.data.forEach(cat => {
const img = document.createElement('img')
img.src = cat.url
img.width = 100
img.height = 100
img.style.cursor = 'pointer'
img.onclick = () => window.open(cat.url)
catContainer.appendChild(img)
})
```
在上述代码中,我们首先获取到一个id为`cat-container`的元素,然后遍历获取到的猫咪数据,创建`img`元素并设置其`src`、`width`、`height`、`style.cursor`和`onclick`属性,最后将其添加到`cat-container`元素中。其中,`onclick`事件用来在新的标签页中打开猫咪图片的大图。
总的来说,以上就是实现您提出的问题的基本思路和代码实现。如果您还有其他问题,可以随时提出并咨询我。
阅读全文