ajax发送get请求json格式返回照片
时间: 2024-07-31 21:01:05 浏览: 32
在Ajax中发送GET请求并接收JSON格式返回的照片,通常涉及到以下几个步骤:
1. **创建请求**: 使用`XMLHttpRequest`对象或现代浏览器的`fetch()`函数发起一个GET请求,指定你要请求的图片资源的URL。例如:
```javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', 'api/images/photo.jpg', true);
```
或者使用fetch:
```javascript
fetch('api/images/photo.jpg')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // 获取JSON格式的响应
});
```
2. **解析响应**: 当服务器返回响应后,你需要解析其内容作为JSON。这将给你一个包含图片信息的对象,例如URL、路径等。如果是基本的JSON,它可能看起来像这样:
```json
{
"url": "http://example.com/image.jpg"
}
```
3. **展示图片**: 根据获取到的图片信息,你可以设置HTML元素的`src`属性来显示图片:
```javascript
xhr.onload = function() {
if (xhr.status === 200) {
const photoData = JSON.parse(xhr.responseText);
document.getElementById('photoContainer').src = photoData.url;
} else {
console.error('Error:', xhr.statusText);
}
};
```
或者在fetch版本:
```javascript
fetchResponse.then(data => {
data.url ? document.getElementById('photoContainer').src = data.url : console.error('No image found in JSON response.');
});
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)