通过axios获取http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php的数据,并在div元素中展示出来
时间: 2023-08-22 20:07:27 浏览: 161
可以使用axios来获取'http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php'的数据,并将其展示在一个div元素中。你可以按照以下步骤进行操作:
1. 创建一个div元素,用于展示获取到的数据:
```html
<div id="data"></div>
```
2. 在JavaScript中,使用axios发送一个GET请求获取数据,并将其展示在div元素中:
```javascript
// 获取数据并展示
axios.get('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php')
.then(function (response) {
// 获取成功后,将数据展示在div元素中
document.getElementById('data').innerHTML = JSON.stringify(response.data);
})
.catch(function (error) {
console.log(error);
});
```
这样,当页面加载时,axios会发送一个GET请求来获取'http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php'的数据,并将其以字符串形式展示在指定的div元素中。请注意,这里使用了`JSON.stringify()`方法将返回的数据转换为字符串形式,以便在div元素中展示。
相关问题
怎么使用axios和proxy跨域访问 https://m.hua.com/home/GetProductListPrice
首先,你需要安装axios和http-proxy-middleware:
```
npm install axios http-proxy-middleware --save
```
然后在你的项目中创建一个proxy.js文件,代码如下:
```js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'https://m.hua.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/home/GetProductListPrice',
},
})
);
};
```
接下来在你的组件中引入axios,然后发起请求:
```js
import axios from 'axios';
axios.get('/api', {
params: {
// 请求参数
},
}).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});
```
注意,这里的请求路径是 '/api',而不是完整的 'https://m.hua.com/home/GetProductListPrice',因为我们已经在proxy.js中配置了代理。当你发起这个请求时,代理服务器会将请求转发到 https://m.hua.com/home/GetProductListPrice,并将响应返回给你的应用程序。
另外,使用proxy跨域访问可能会引起一些安全问题,你需要在服务器端进行一些安全处理,例如:限制允许访问的来源、限制允许访问的HTTP方法等。
http://43.138.15.137:3003/api/getcates 如何请求第二层children的数据
可以使用axios库或者其他的HTTP请求库来请求该接口,并且在请求成功后,使用JavaScript的JSON.parse()方法将响应数据解析为JSON对象,然后就可以通过访问该JSON对象的属性和索引来获取第二层children的数据。
示例代码如下:
```javascript
const axios = require('axios');
axios.get('http://43.138.15.137:3003/api/getcates')
.then(response => {
const data = response.data; // 获取响应数据
const json = JSON.parse(data); // 解析为JSON对象
// 获取第二层children的数据
const children = json[0].children;
console.log(children); // 输出第二层children的数据
})
.catch(error => {
console.log(error);
});
```
需要注意的是,由于该接口返回的数据可能存在跨域问题,可以在服务器端进行代理转发或者在客户端使用CORS(跨域资源共享)来解决跨域问题。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)